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（）= $（＆＃39; body＆＃39;）。innerWidth（）= $（window）.innerWidth（）= $（document）.innerWidth（）

Answer 1

您是否尝试在事件功能中添加代码？

＆＃13;

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

＆＃13;

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

＆＃13;

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文档，它使用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/

@media（max-width：837px）！= $（document）.width（）＆lt; 837

3 个答案: