编辑:更多研究表明这实际上与jQuery 在 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","");
}
}