CSS 媒体查询和 JavaScript 窗口宽度不匹配
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11309859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS media queries and JavaScript window width do not match
提问by beno?t
For a responsive template, I have a media query in my CSS:
对于响应式模板，我的 CSS 中有一个媒体查询：
@media screen and (max-width: 960px) {
body{
/* something */
background:red;
}
}
And, I made a jQuery function on resize to log width:
而且，我在调整大小以记录宽度时制作了一个 jQuery 函数：
$(window).resize(function() {
console.log($(window).width());
console.log($(document).width()); /* same result */
/* something for my js navigation */
}
And there a difference with CSS detection and JS result, I have this meta:
CSS检测和JS结果存在差异，我有这个元：
<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>
I suppose it's due to the scrollbar (15 px). How can I do this better?
我想这是由于滚动条（15 像素）。我怎样才能做得更好？
回答by Michael Bird
You're correct about the scroll bar, it's because the CSS is using the device width, but the JS is using the document width.
您对滚动条是正确的，这是因为 CSS 使用的是设备宽度，而 JS 使用的是文档宽度。
What you need to do is measure the viewport width in your JS code instead of using the jQuery width function.
您需要做的是在您的 JS 代码中测量视口宽度，而不是使用 jQuery 宽度函数。
This code is from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
此代码来自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' ] };
}
回答by LarS
I found following code on http://www.w3schools.com/js/js_window.asp:
我在http://www.w3schools.com/js/js_window.asp上找到了以下代码：
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
Practically its working the same way as the answer in @Michael Bird's answer, but it's more easy to read.
实际上，它的工作方式与@Michael Bird 的答案中的答案相同，但更易于阅读。
Edit:I was looking for a method to give exactly the same width as it is used for css media queries. But the suggested one does not work perfect on Safari with scrollbars, sorry. I ended up using modernizr.js in one central function and in the rest of the code I just check if display type is mobile, tablet or desktop. As I am not interested in the width, this works fine for me:
编辑：我正在寻找一种方法来提供与用于 css 媒体查询的宽度完全相同的宽度。但是建议的一个在带有滚动条的 Safari 上并不完美，抱歉。我最终在一个核心功能中使用了 Modernizr.js，而在其余代码中，我只检查显示类型是移动设备、平板电脑还是桌面设备。由于我对宽度不感兴趣，这对我来说很好用：
getDisplayType = function () {
if (Modernizr.mq('(min-width: 768px)')){
return 'desktop';
}
else if (Modernizr.mq('(min-width: 480px)')){
return 'tablet'
}
return 'mobile';
};
回答by Ross
window.innerWidth is what you need.
window.innerWidth 是你所需要的。
if (window.innerWidth < 768) works for 768 break point in CSS
if (window.innerWidth < 768) 适用于 CSS 中的 768 断点
回答by fr-info
Hi i use this little trick to get JS and CSS work together easily on responsive pages :
嗨，我使用这个小技巧让 JS 和 CSS 在响应式页面上轻松协同工作：
Test the visibility of an element displayed or not on CSS @media size condition. Using bootstrap CSS i test visibility of a hidden-xs class element
测试元素在 CSS @media 大小条件下是否显示的可见性。使用 bootstrap CSS 我测试 hidden-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>回答by Arsen Pyuskyulyan
Workaround that always works and is synced with CSS media queries.
始终有效并与 CSS 媒体查询同步的解决方法。
Add a div to body
给body添加一个div
<body>
...
<div class='check-media'></div>
...
</body>
Add style and change them by entering into specific media query
添加样式并通过输入特定的媒体查询来更改它们
.check-media{
display:none;
width:0;
}
@media screen and (max-width: 768px) {
.check-media{
width:768px;
}
...
}
Then in JS check style that you are changing by entering into media query
然后在 JS 检查您通过进入媒体查询更改的样式
if($('.check-media').width() == 768){
console.log('You are in (max-width: 768px)');
}else{
console.log('You are out of (max-width: 768px)');
}
So generally you can check any style that is being changed by entering into specific media query.
因此，通常您可以通过输入特定的媒体查询来检查正在更改的任何样式。
回答by Jim
My experience was that the media query width tracks document.body.clientWidth. Because of a vertical scroll bar coming and going, checking document, window, or viewport().width could cause my Javascript to run late--after the media query rule change, depending on the height of the window.
我的经验是媒体查询宽度跟踪 document.body.clientWidth。由于垂直滚动条来来去去，检查文档、窗口或视口().width 可能会导致我的 Javascript 运行延迟——在媒体查询规则更改后，取决于窗口的高度。
Checking document.body.clientWidth allowed my script code to execute consistently at the same time the media query rule took effect.
检查 document.body.clientWidth 允许我的脚本代码在媒体查询规则生效的同时一致执行。
@media (min-width:873px) {
//some rules
}
...
@media (min-width:873px) {
//一些规则
}
...
if ( document.body.clientWidth >= 873) {
// some code
}
if ( document.body.clientWidth >= 873) {
// 一些代码
}
The Andy Langton code put me onto this--thanks!
Andy Langton 代码让我明白了这一点——谢谢！
回答by Sam Morgan
Css media query is equal to window.innerWidth. Css Media Queries calculate the scrollbar as well.
CSS 媒体查询等于 window.innerWidth。Css Media Queries 也计算滚动条。
