5

編集:より多くの調査によると、これは実際にはjQueryがChrome 18.0.1025.168で間違った幅と高さを返すことに関連しています

現在のワードプレスのテーマ プロジェクトで、いくつかのメディア クエリといくつかの 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","");
    }
}
4

1 に答える 1