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

Posted

技术标签:

【中文标题】CSS 媒体查询和 JavaScript 窗口宽度不匹配【英文标题】:CSS media queries and JavaScript window width do not match 【发布时间】:2012-07-03 19:44:49 【问题描述】:

对于响应式模板,我的 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 像素)。我怎样才能做得更好?

【问题讨论】:

【参考方案1】:

简单可靠的方法是使用Media Queries。

为了演示,我想检查一下屏幕宽度是否大于等于992px(Bootstrap的大设备):

function isLargeDevice() 
    if (window.matchMedia("(min-width: 992px)").matches) 
        return true;
     
    return false;

如果你用的是Modernizer那就简单一点,这里我想检查一下屏幕是否小于Bootstrap的大屏(992px)

function isSmallerThanLargeScreen() 
    if (Modernizr.mq('(max-width: 991px)')) 
        return true;
    
    return false;

【讨论】:

【参考方案2】:

Css 媒体查询等于 window.innerWidth。 Css 媒体查询也会计算滚动条。

【讨论】:

【参考方案3】:

window.innerWidth 是你需要的。

if (window.innerWidth

【讨论】:

为什么这不是最佳答案?它非常短,无需 jQuery 即可工作。太好了! 在 Safari 中,当媒体查询触发 768px 时,window.innerWidth 返回 783(不是 768)【参考方案4】:

始终有效并与 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)');

因此,通常您可以通过输入特定的媒体查询来检查正在更改的任何样式。

【讨论】:

【参考方案5】:

您好,我使用这个小技巧让 JS 和 CSS 在响应式页面上轻松协同工作:

测试在 CSS @media 大小条件下显示或不显示的元素的可见性。 使用引导 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>

【讨论】:

【参考方案6】:

我在http://www.w3schools.com/js/js_window.asp找到了以下代码:

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

实际上它的工作方式与@Michael Bird 答案中的答案相同,但更容易阅读。

编辑:我一直在寻找一种方法来提供与用于 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';
;

【讨论】:

如果document.documentElement 不存在,此脚本将失败。不要相信 w3schools,请参阅 w3fools.com @ausi:你能不能比“不信任 w3schools”更详细一些?到目前为止我看不到问题。另见Any cross browser issues with document.documentElement 好的,好像没有没有document.documentElement的浏览器。不知道。【参考方案7】:

我的经验是媒体查询宽度跟踪 document.body.clientWidth。由于垂直滚动条来来去去,检查文档、窗口或 viewport().width 可能会导致我的 javascript 延迟运行——在媒体查询规则更改之后,具体取决于窗口的高度。

检查 document.body.clientWidth 允许我的脚本代码在媒体查询规则生效的同时一致地执行。

@media(最小宽度:873px) //一些规则 ...

如果 (document.body.clientWidth >= 873) // 一些代码

Andy Langton 代码让我明白了这一点——谢谢!

【讨论】:

如果正文比屏幕宽,这将不起作用。我看到了一个不可见的 div 定位固定并且其宽度设置为 100% 的解决方案。使用它的 clientWidht 应该可以工作。【参考方案8】:

你说的对滚动条是正确的,这是因为 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' ] ;

【讨论】:

固体。比 $(document).width(); 好得多window.matchMedia() 可能更好,但它的 IE10+ 如果窗口有滚动条并且您的媒体查询正在检查最大宽度,这似乎不起作用,至少在 Chrome 中是这样。在您知道由特定媒体查询设置的元素上检查一些 CSS 似乎可行。 @mhenry1384 你在说什么?

以上是关于CSS 媒体查询和 JavaScript 窗口宽度不匹配的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Javascript 或 CSS 在 DIV 上应用媒体查询 [重复]

CSS媒体查询和Firefox的滚动条宽度[重复]

基于窗口大小的闪亮动态内容(如 CSS 媒体查询)

如何使用 Javascript 获取“css-pixel”(媒体查询)宽度?

使用 JavaScript 检测动态媒体查询而不在脚本中硬编码断点宽度?

CSS3 媒体查询 - 容器的宽度而不是屏幕的宽度?