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

【问题标题】：Hide A DIV if screen is narrower than 1280px如果屏幕窄于 1280 像素，则隐藏 DIV
【发布时间】：2012-09-15 03:03:05
【问题描述】：

我正在尝试实现一个自动检测用户屏幕分辨率的浮动 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>

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

【问题讨论】：

这可以通过 css3 媒体查询来完成，是否可以选择？
你能分享整个 HTML 吗？
您是否正确包含了 jQuery 库？ div 是否有确切的id？
我已经编辑了我的代码。 div id = "#floatdiv"
除了媒体查询，您只需调用 screen.width()，因为它是 jQuery 方法而不是属性。顺便说一句，screen 的变量名可能是一个非常糟糕的主意。

标签： javascript hide show

【解决方案1】：

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

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

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

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

已编辑

【讨论】：

用户没有告诉 css3 作为一个选项
更关心与旧版IE的兼容性。

【解决方案2】：

如何使用 CSS 媒体查询？您可以添加一个匹配小于 1280 像素的屏幕并在 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;
   }
}

【讨论】：

用户没有告诉 css3 作为一个选项
嗨，伊万，谢谢。 CSS 媒体查询是否与 IE 7 和 8 兼容？我担心兼容性。
caniuse.com/css-mediaqueries - 所以不，不幸的是它似乎不受支持。
@ScarletAriadneVela 不，他们需要 IE9 或更高版本。

【解决方案3】：

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

【讨论】：

哇，亚当，我已经尝试了你的建议，它奏效了！呜呜呜呜呜呜！哈哈。已经为此工作了一个小时，您只需查看我的代码并立即解决它。谢谢！
没问题。很高兴我能帮上忙。
最后一个问题，这个库和我的代码有关系吗？
如果你想使用 .ready()、.hide() 和 .show() 方法，你仍然需要 jQuery 库。
看看这个页面：developers.google.com/speed/libraries/devguide#jquery-ui。您发布的链接是主jQuery库，但您需要将jqueryui文件放在主jQuery库之后

【解决方案4】：

可以通过screen.availWidth获取屏幕宽度

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

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

 }

【讨论】：

是的，但是screen.width 也应该正确返回一个宽度以进行比较。