@media（最大宽度：837px）！= $（文档）.width（）<837

Question

大家，我都试图建立一个响应式网站，所以我添加了媒体查询，所以就像：

@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（）

Answer 1

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

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

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

Answer 2

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

我认为，您应该尝试$（window）.width（）

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

Answer 3

根据@media docs，它使用viewport宽度，而不是document width 。

在此页面上的控制台中：

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

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

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

而这个用于处理浏览器视口差异的工具： http : //www.matanich.com/2013/01/07/viewport-size/