CSS媒体查询和JavaScript窗口宽度不匹配
CSS媒体查询和JavaScript窗口宽度不匹配
提问于 2012-07-03 19:21:54
对于响应式模板，我的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像素)。我怎样才能做得更好呢？
回答 7
Stack Overflow用户
回答已采纳
发布于 2012-07-03 19:53:52
您对滚动条的看法是正确的，这是因为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' ] };
}Stack Overflow用户
发布于 2016-05-07 03:47:53
window.innerWidth就是您所需要的。
如果(window.innerWidth < 768)适用于CSS中的768断点
Stack Overflow用户
发布于 2013-05-23 11:24:08
我的经验是媒体查询宽度跟踪document.body.clientWidth。由于垂直滚动条来来去去，检查文档、窗口或视口().width可能会导致我的Javascript延迟运行--在媒体查询规则更改之后，具体取决于窗口的高度。
检查document.body.clientWidth允许我的脚本代码在媒体查询规则生效的同时一致执行。
@media (最小宽度:873px) {
*//一些规则
}..。
if ( document.body.clientWidth >= 873) {
// some code }安迪·兰顿的代码让我明白了--谢谢！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11309859
复制相关文章
相似问题