53

对于响应式模板，我的 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 px）。我怎样才能做得更好？

4

8 回答 8

72

您对滚动条是正确的，这是因为 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' ] };
}
于 2012-07-03T11:53:51.817 回答
9

我在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';
};
于 2014-03-04T02:16:00.647 回答
6

window.innerWidth 是您所需要的。

if (window.innerWidth < 768) 适用于 CSS 中的 768 断点

于 2016-05-06T19:47:53.137 回答
2

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

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

于 2015-04-08T15:59:54.943 回答
1

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

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

@media (min-width:873px) {
     //一些规则
}
...

if ( document.body.clientWidth >= 873) {
    // 一些代码
}

安迪兰顿代码让我明白了这一点——谢谢！

于 2013-05-23T03:24:08.227 回答
1

嗨，我使用这个小技巧让 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>

于 2015-01-06T17:26:52.707 回答
0

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

于 2016-07-05T23:21:46.833 回答
0

执行此操作的简单可靠的方法是使用媒体查询。

为了演示，我想检查一下屏幕宽度是否大于等于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;
}
于 2020-12-30T00:11:34.747 回答