Fatal编程技术网
  • javascript/
  • CSS媒体查询和JavaScript窗口宽度不匹配

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

javascript jquery

CSS媒体查询和JavaScript窗口宽度不匹配,javascript,jquery,media-queries,Javascript,Jquery,Media Queries,对于响应模板，我的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 */

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

你对滚动条的看法是正确的，因为CSS使用的是设备宽度，而JS使用的是文档宽度

您需要做的是在JS代码中测量视口宽度，而不是使用jQuery width函数

此代码来自

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

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

@媒体（最小宽度：873px）
{

//一些规则
}

如果（document.body.clientWidth>=873）
{

//一些代码
}

安迪·兰顿的密码让我明白了——谢谢

我在上找到了以下代码：

实际上，它的工作方式与@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';
};
嗨，我用这个小技巧让JS和CSS在响应页面上轻松协作：

测试CSS@media size条件下显示或不显示的元素的可见性。 使用引导CSS，我测试了隐藏xs类元素的可见性

var msg=“U的消息”；
/*在窗口加载时检查初始尺寸*/
if（$（'#test xsmall'）。是（':hidden'））{
/*这是一个很小的情况*/
msg=“@media CSS<768px.JS width=“+$（窗口）.width（）+”红色！”；
$（'.redthing on xsmall'）.addClass（'redthing'）.html（msg）；
}否则{
/*根据CSS，大于768px*/
msg=“@media CSS>767px.JS width=“+$（窗口）.width（）+”非红色！”；
$（'.redthing on xsmall'）.removeClass（'redthing'）.html（msg）；
}
/*再次调整窗口大小时*/
$（窗口）.on（'resize'，function（））{
if（$（'#test xsmall'）。是（':hidden'））{
msg=“@media CSS<768px.JS width=“+$（窗口）.width（）+”红色！”；
$（'.redthing on xsmall'）.addClass（'redthing'）.html（msg）；
}否则{
msg=“@media CSS>767px.JS width=“+$（窗口）.width（）+”非红色！”；
$（'.redthing on xsmall'）.removeClass（'redthing'）.html（msg）；
}
});

@介质（最小宽度：768px）{
.隐藏的X{
显示：块！重要；
}
}
@介质（最大宽度：767px）{
.隐藏的X{
显示：无！重要；
}
}
.xsmall上的redthing{
/*需要一个滚动条来显示JS和css之间的窗口宽度差异*/
最小高度：1500px；
}
红东西先生{
颜色：红色；
}



此元素由隐藏在低于767px的@media上的CSS管理

此元素由JQUERY RED在@media max width 767px上管理，该解决方案始终有效，并与CSS媒体查询同步

在正文中添加一个div


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


然后在JS中通过进入媒体查询来检查您正在更改的样式


.check-media{
    display:none;
    width:0;
}
@media screen and (max-width: 768px) {
    .check-media{
         width:768px;
    }
    ...
}



if($('.check-media').width() == 768){
    console.log('You are in (max-width: 768px)');
}else{
    console.log('You are out of (max-width: 768px)');
}



因此，一般来说，您可以通过输入特定的媒体查询来检查正在更改的任何样式。
window.innerWidth是您所需要的


如果（window.innerWidth<768）适用于CSS中的768断点，则CSS媒体查询等于window.innerWidth。Css媒体查询也会计算滚动条。
简单可靠的方法是使用

为了演示，我想检查屏幕宽度是否大于或等于992px（Bootstrap的大型设备）：


函数isLargeDevice（）{
if（window.matchMedia（“（最小宽度：992px）”）.matches）{
返回true；
} 
返回false；
}


如果您正在使用，那么它会更容易一些，在这里我想检查屏幕是否比Bootstrap的大屏幕（992px）小


函数IsSmallerHandlargescreen（）{
if（modernizer.mq（‘（最大宽度：991px）’）{
返回true；
}
返回false；
}

如果
document.documentElement
不存在，此脚本将失败。不要信任w3schools，请看@ausi:you't not trust w3schools’（不要信任w3schools，请您对w3schools友好一点，详细一点）好吗？到目前为止我还看不出这个问题。另请参见“确定”，似乎没有没有没有
document.documentElement
的浏览器。我不知道。如果机身比屏幕宽，这就不行了。我看到一些解决方案，其中一个不可见的div是固定的，它的宽度设置为100%。使用它的clientwidt应该是有效的。比$（document）.width（）好得多；matchMedia（）可能更好，但如果窗口有滚动条，并且您的媒体查询正在检查最大宽度（至少在Chrome中），那么它的IE10+似乎不起作用。不过，在您知道由特定媒体查询设置的元素上检查一些css似乎是可行的。@mhenry1384您在说什么？为什么这不是最佳答案？它非常短，没有jQuery也可以工作。伟大的在Safari中，当媒体查询触发768px时，window.innerWidth返回783（不是768）

.check-media{
    display:none;
    width:0;
}
@media screen and (max-width: 768px) {
    .check-media{
         width:768px;
    }
    ...
}



if($('.check-media').width() == 768){
    console.log('You are in (max-width: 768px)');
}else{
    console.log('You are out of (max-width: 768px)');
}