javascript - 如果屏幕窄于 1280 像素，则隐藏 DIV

Question

我正在尝试实现一个浮动 div 来自动检测用户的屏幕分辨率。如果分辨率低于1280，会自动隐藏某个div。

我已经阅读了这个和这个并尝试使用这些代码，但它对我不起作用。我正在使用wordpress并将js代码粘贴到</header>

我粘贴在标题中的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    var screen = $(window)    

    if (screen.width < 1280) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

//run on document load and on window resize
$(document).ready(function () {
    //on load
    hideDiv();
    //on resize
    $(window).resize(function(){
        hideDiv();
    });
}); 
</script>

不幸的是，我无法让它工作。这里似乎有什么问题？

Answer 1

使用 CSS 媒体查询怎么样？您可以添加一个匹配小于 1280 像素的屏幕并设置display: none;在 div 上的屏幕。

@media (max-width: 1280px) {
    #floatdiv {
       display: none;
       /* or, to just hide the contents but leave it in the layout of the page: */
       visibility: hidden;
   }
}

Answer 2

将“screen.width”替换为“window.innerWidth”

Answer 3

如果您不关心旧浏览器（Internet Explorer），最简单的方法不是 JavaScript，而是CSS3 Media Queries。

有关浏览器兼容性的更多信息，请点击此处。感谢Ivan Vergiliev。

 @media (max-width: 1280px) {
   #floatdiv {
     display: none;
   }
 }

这意味着只有当屏幕宽度小于 1280 像素时才会应用 CSS。

已编辑

Answer 4

你可以通过screen.availWidth

 $("#floatdiv").show();

 while(screen.availWidth < 1280){
      $("#floatdiv").hide();

 }