CSS媒体查询和JavaScript窗口宽度不匹配
对于响应模板，我在我的CSS中有一个媒体查询：
@media screen and (max-width: 960px) { body{ /* something */ background:red; } } 而且，我做了一个resize的jQuery函数来logging宽度：
$(window).resize(function() { console.log($(window).width()); console.log($(document).width()); /* same result */ /* something for my js navigation */ }
和CSS检测和JS结果有所不同，我有这个元：
<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>
我想这是由于滚动条（15像素）。 我怎样才能做得更好？
你对滚动条是正确的，这是因为CSS正在使用设备宽度，但JS正在使用文档宽度。
你需要做的是测量你的JS代码中的视口宽度，而不是使用jQuery宽度函数。
此代码来自http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
function viewport() { var e = window, a = 'inner'; if (!('innerWidth' in window )) { a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; }
我在http://www.w3schools.com/js/js_window.asp上find了以下代码：;
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
实际上它的工作方式与@Michael Bird的答案中的答案是一样的，但更容易阅读。
编辑：我正在寻找一个方法，给出完全相同的宽度，因为它是用于CSS媒体查询。 但是，build议使用滚动条的Safari不能完美工作，抱歉。 我最终在一个中心函数中使用了modernizr.js，在代码的其余部分我只是检查显示types是移动，平板电脑还是桌面。 由于我对宽度不感兴趣，这对我来说工作得很好：
getDisplayType = function () { if (Modernizr.mq('(min-width: 768px)')){ return 'desktop'; } else if (Modernizr.mq('(min-width: 480px)')){ return 'tablet' } return 'mobile'; };
window.innerWidth是你所需要的。
如果（window.innerWidth <768）适用于CSS中的768个断点
我的经验是，媒体查询宽度跟踪document.body.clientWidth。 由于垂直滚动条来去，检查文档，窗口或视口（）。宽度可能会导致我的Javascript运行迟 – 媒体查询规则更改后，根据窗口的高度。
检查document.body.clientWidth允许我的脚本代码在媒体查询规则生效的同时执行一致。
@media（min-width：873px） {
//一些规则
}
…
if（document.body.clientWidth> = 873） {
//一些代码
}
安迪·兰顿的代码把我放在这里 – 谢谢！
嗨，我使用这个小技巧来让JS和CSS轻松地在响应式页面上一起工作：
testingCSS @media大小条件下显示的元素的可见性。 使用引导CSS我testinghidden-xs类元素的可见性
var msg = "a message for U"; /* At window load check initial size */ if ( $('#test-xsmall').is(':hidden') ) { /* This is a CSS Xsmall situation ! */ msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; $('.redthing-on-xsmall').addClass('redthing').html(msg); } else { /* > 768px according to CSS */ msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; $('.redthing-on-xsmall').removeClass('redthing').html(msg); } /* And again when window resize */ $(window).on('resize', function() { if ($('#test-xsmall').is(':hidden')) { msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; $('.redthing-on-xsmall').addClass('redthing').html(msg); } else { msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; $('.redthing-on-xsmall').removeClass('redthing').html(msg); } });
@media (min-width: 768px) { .hidden-xs { display: block !important; } } @media (max-width: 767px) { .hidden-xs { display: none !important; } } .redthing-on-xsmall { /* need a scrollbar to show window width diff between JS and css */ min-height: 1500px; } .redthing { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- the CSS managed Element that is tested by JS --> <!-- class hidden-xs hides on xsmall screens (bootstrap) --> <span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS HIDDEN on @media lower than 767px</span> <!-- the responsive element managed by Jquery --> <div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on @media max width 767px </div>
解决方法始终有效，并与CSS媒体查询同步。
添加一个div到正文
<body> ... <div class='check-media'></div> ... </body>
添加样式并通过input特定媒体查询来更改它们
.check-media{ display:none; width:0; } @media screen and (max-width: 768px) { .check-media{ width:768px; } ... }
然后在JS检查你正在改变的风格，进入媒体查询
if($('.check-media').width() == 768){ console.log('You are in (max-width: 768px)'); }else{ console.log('You are out of (max-width: 768px)'); }
因此，通常您可以通过input特定的媒体查询来检查正在更改的任何样式。
Css媒体查询等于window.innerWidth。 Css媒体查询也计算滚动条。
