@media (最大宽度: 837px) != $(document).width()<837答案

【问题标题】：@media (max-width: 837px) != $(document).width()<837@media (最大宽度: 837px) != $(document).width()<837
【发布时间】：2014-12-26 15:20:13
【问题描述】：

大家，我尝试制作一个响应式网站，所以我添加了媒体查询就像这样：

@media (min-width: 838px) {
    bigscreen code
}
@media (max-width: 837px) {
    littlescreen code
}

但是当我用 JS 做一些事情时，比如

if($(document).width()<837+1){
code
}

我制作了一个 console.log($(document).width())。当 $(document).width() = 820 时发生 css littlescreen 代码，但我不知道为什么。如果有人知道，谢谢你

编辑： $(window).width() = $(document).width() = $('body').innerWidth() = $(window).innerWidth() = $(document).innerWidth()

【问题讨论】：

那么820 不小于837??
@Pointy 是的，但我的媒体查询仅在 js 说宽度为 820 时才起作用

标签： html css responsive-design width media-queries

【解决方案1】：

根据@media docs，它使用the viewport width, not the document width。

在此页面的控制台中：

window.innerWidth
1936
$(document).width()
1921

也许我们在谈论滚动条的宽度（或其他）的差异？

该网站为您提供了不同宽度输出的良好指南： http://ryanve.com/lab/dimensions/

还有一个用于处理浏览器视口差异的：http://www.matanich.com/2013/01/07/viewport-size/

【讨论】：

我的页面中有一个滚动条，但即使使用'body'而不是文档/窗口，它们也具有相同的宽度
有趣..我有不同的价值观。也许我们看到了一些浏览器差异http://www.matanich.com/2013/01/07/viewport-size/？我在 Chrome 上。你呢？
我用chrome来。我不知道为什么

【解决方案2】：

$(window).width();   // returns width of browser
 $(document).width(); // returns width of HTML

我想，你应该试试 $(window).width()

if($(window).width()<837+1){
code
}

【讨论】：

我尝试了同样的事情

【解决方案3】：

您是否尝试在事件函数中添加代码？

window.addEventListener('resize', function(event){
               
               console.log($(document).width());
  
               if($(document).width()<837){
                 
                  alert("Less than 837px");
                  
               }
    });

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：