CSS媒体查询和JavaScript窗口宽度不匹配CSS媒体查询和JavaScript窗口宽度不匹配

对于一个负责任的模板，我在我的CSS媒体查询：

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

而且，我做了调整大小记录宽度的jQuery的功能：

$(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像素）。我该怎么做更好？

Answer 1:

您即将滚动条正确的，这是因为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' ] };
}

Answer 2:

我发现下面的代码上http://www.w3schools.com/js/js_window.asp ：

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

实际上它的工作方式与在@迈克尔鸟的答案的答案相同，但它更容易阅读。

编辑：我一直在寻找，因为它是用于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';
};

Answer 3:

window.innerWidth是你所需要的。

如果（window.innerWidth <768）适用于在CSS 768破发点

Answer 4:

我的经验是，媒体查询宽度跟踪document.body.clientWidth。由于垂直滚动条人来人往，检查文件，窗口或视（）宽度可能会导致我的JavaScript后期运行 - 媒体查询规则改变后，根据窗口的高度。

检查document.body.clientWidth让我的脚本代码，同时媒体查询规则生效一贯执行。

@media（最小宽度：873px） {
//一些规则
}
...

如果（document.body.clientWidth> = 873） {
//一些代码
}

安迪·兰顿代码把我拉到这 - 谢谢！

Answer 5:

嗨，我用这个小动作让JS和CSS一起工作轻松响应的网页：

测试显示元素的可见或不CSS @media大小条件。使用CSS引导我测试一个隐藏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>

Answer 6:

解决方法总是工作，并同步与CSS媒体查询。

一个div加入体

<body>
    ...
    <div class='check-media'></div>
    ...
</body>

添加作风，进入特定媒体查询更改它们

.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)');
}

所以，一般来说，你可以检查正在进入特定媒体查询更改的任何风格。