如果屏幕宽度小于 800（移动设备），则完全删除 div答案

【问题标题】：Completely remove a div if screen width is less than 800 (mobile device)如果屏幕宽度小于 800（移动设备），则完全删除 div
【发布时间】：2017-08-27 12:13:18
【问题描述】：

所以我一直在寻找around，但我真的找不到很好的解决方案，所以我希望你们中的一些人能帮助我...... 我正在尝试删除一个 div，所以如果我的屏幕尺寸大约是手机大小，它就不存在了......我知道没有显示使 div 不可见，但是因为我在那个 div 上有一个 setInterval 函数它仍然每 5 秒加载一次...所以我的问题是：

如果我的屏幕小于 x 像素，我可以完全删除 div 吗
或者是否可以仅在宽度大于 x 时运行我的 setinterval 函数？

感谢您的宝贵时间！

    setInterval(function(){ 
$( ".chatMessages" ).load( "getMeddelanden.php" );
},5000);

【问题讨论】：

看看Window.matchMedia()

标签： javascript jquery html

【解决方案1】：

这是一个幼稚的实现，setinterval 无论如何都会运行并检查它是否必须“操作”，div 隐藏在某个窗口宽度下，您可以通过在调整大小内清除并重新启动所需宽度的间隔来修改此逻辑函数处理程序，并消除 resize 事件。

function isMobilewidth () {
  return $(window).width() <= 800;
}

$(window).on('resize', function() {
    $('.chatMessages').toggle(isMobilewidth());
});

setInterval(function(){ 
  if (!isMobilewidth())
    $( ".chatMessages" ).load( "getMeddelanden.php" );
},5000);

【讨论】：

感谢您的回答就像一个魅力！有道理我需要检查它是否必须运行

【解决方案2】：

您可以使用 CSS 媒体查询：

@media only screen and (max-width: 800px) {
    div {
        display: none;
    }
}

如果您想坚持使用 javascript，请尝试使用 DOM 元素的 .offsetWidth 属性

【讨论】：

【解决方案3】：

使用CSS @media rules:

@media (max-width: 800px) {
    .div {
        display:none;
    }
}

https://fiddle.jshell.net/Luc2zrbd/

【讨论】：

@UnknownPotato 我不喜欢这种态度，而且您不仅得到了一个而且有两个类似的解决方案这一事实表明您的问题不清楚，或者至少，它本来可以更清楚。跨度>

【解决方案4】：

在这种情况下，您可以获取设备的屏幕宽度，如下所示并进行相应的操作。

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

【讨论】：

【解决方案5】：

您可能不需要 setInterval，您可以将测试基于 window.resize，它也会在设备移动设备上的页面加载时触发有关移动视口的说明，请参见此处：

http://www.quirksmode.org/mobile/viewports2.html

window.onresize = function(){
 // set your business here

}

【讨论】：