Question

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

我已阅读this和this并尝试使用这些代码，但这对我不起作用。我正在使用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媒体查询？您可以添加一个匹配1240px以下屏幕的屏幕，并在div上设置display: none;。

@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。

有关浏览器兼容性的更多信息here。感谢Ivan Vergiliev。

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

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

<强>被修改

Answer 4

您可以按screen.availWidth

获取屏幕宽度

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

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

 }

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

4 个答案: