Question

所以我一直在寻找around，我真的无法找到解决方案，所以我希望有些人可以帮助我...... 我试图删除一个div，所以如果我的屏幕大小大约是一个移动设备的大小它不存在...我知道有显示没有使div不可见，但因为我在该div上有一个setInterval函数它每秒加载一次...所以我的问题是：

如果我的屏幕小于x像素
或者当宽度大于x时，是否可以只运行我的setinterval函数？

谢谢你的时间！

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

Answer 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);

Answer 2

您可以使用CSS媒体查询：

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

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

Answer 3

使用CSS @media rules：

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

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

Answer 4

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

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

Answer 5

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

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

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

}

如果屏幕宽度小于800（移动设备）

5 个答案: