媒体查询最大宽度在 Chrome 中以错误的宽度启动答案

【问题标题】：Media Queries max-width launch at wrong width in Chrome媒体查询最大宽度在 Chrome 中以错误的宽度启动
【发布时间】：2014-05-15 19:12:57
【问题描述】：

编辑：更多研究表明这实际上与jQuery returns wrong width and height in Chrome 18.0.1025.168 有关

我在当前的 wordpress 主题项目中设置了一些媒体查询和一些 javascript。一般来说，它们工作得很好，但是（！）媒体查询：

@media only screen and (max-width: 980px)

在 1075px 时已经生效。

$(document).width()
1075
$("body").width()
1019.4444427490234

这发生在 Chrome 中，但在 Safari 中它的行为就像它应该的那样。我没有检查任何其他浏览器。

你能用 javacript 改变元素的宽度以某种方式破坏查询正确的“启动宽度”吗？

CSS：

@media only screen and (max-width: 1060px){
.excerpt{
    width: 500px;
    float: left;
    font-size: 13px;
}
}
@media only screen and (max-width: 980px){
.hentry{
    height: auto;
}
.thumbnail,.excerpt{
    float: none;
    max-height: none;
}
p{
    font-size: 15px;
}
#site-description{
    display: none;
}
}

在此之前最新添加的 javascript：

if($(window).width()<1065 || $(document).width()<1065){
    if($(document).width()>980){
        $(".excerpt").width($(".hentry").width()-515);
    } else{
        $(".excerpt").css("width","");
    }
}

【问题讨论】：

实际上，我检查了我的其他查询，它们都以错误的宽度启动。每次大约 100 太宽。所以@media (max-width:320px) 在大约 420px 文档宽度时生效。媒体查询正在检查什么？正文、文档、窗口还是什么？

标签： jquery google-chrome media-queries

【解决方案1】：

你确定它和jQuery有关吗？

我遇到了同样的问题（媒体查询以错误的宽度触发），原因是我在 Chrome 中的缩放级别不是 100%。我知道，我很傻。

只需按 cmd+0 或 ctr+0 即可默认为 100%。

【讨论】：