0

メディアクエリで最も奇妙な問題が発生しています。私のデスクトップ ブラウザでは、サイズを変更すると正常に動作します。iPhone (5C) でテストすると、メディア クエリは完全に無視されます。

編集 max-width を 3000px のようなばかげたものに変更すると、スタイルがうまく適用されます..

メディア クエリは、私のスタイルシートの最後の項目です。メディアクエリ固有のブロックは次のとおりです。

@media only screen and (max-width:930px){
html{ font-size:46.875%; }
.arrowdown, .arrowup{ border-width:20px;}
#about .abouttext{
    width:90%;
    font-size: 1.8rem;
    line-height:2.7rem;
    padding-bottom:40px;
}
#quotebox{background-color:green;}
#quotebox h3{ width:65%; }
#quotebox div{ width:40%;}
#contact ul li{
    font-size:1.6rem;
    width:90%;
}
.socialbox img{ opacity:1; }
.socialbox a{ margin: 0 20px;}

.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
    visibility: hidden;
    opacity:0;
}
.hint:after, [data-hint]:after {
    content: "-";
    width:0;
    height:0;
}   

}

誰でもアイデアはありますか？

4

1 に答える 1

1

次のスニペットを HTML の先頭に追加して、メディア クエリに max-device-width を追加してみてください。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">

したがって、メディア クエリは次のようになります。

@media only screen and (max-width: 930px), only screen and (max-device-width: 930px){
    html{ font-size:46.875%; }
    .arrowdown, .arrowup{ border-width:20px;}
    #about .abouttext {
            width:90%;
            font-size: 1.8rem;
            line-height:2.7rem;
            padding-bottom:40px;
            }
}
于 2013-11-06T18:39:09.593 に答える