0

メディア クエリを使用する CSS がデバイスを正しく検出しません... 私のコード:

@media  screen and (min-width: 240px) and (max-width: 320px) {
    #test{
        width:50px;
        height:50px;
        background-color:blue;
    }
}
@media screen and (min-width: 640px) {
    #test{
        width:50px;
        height:50px;
        background-color:red;
    }
}

HTC wildfire のような小さな電話では div を青く、iPad Mini のようなタブレットでは赤くしたいのです。

4

2 に答える 2

2

コメントからの拡張:

小型デバイスのブラウザは、Web ページを少し拡大する傾向があります。メディアクエリの「実際の」ディメンションを取得するには、追加します

<meta name="viewport" content="initial-scale=1.0" />

ドキュメントの先頭に。

「レンダリングされた」ディメンションを検査するには、次のようなものを使用します。

<script type="text/javascript">
window.addEventListener("load",function(){
    var box=document.body.getBoundingClientRect();
    document.getElementById("whatever").value=box.width+" x "+box.height;
},false);
</script>

これにより、ブラウザ自体のスケール設定が妨げられる場合と妨げられない場合がありますが、少なくとも「自動」スケーリングは妨げられます。

私自身の経験では、長いセンテンスのような状況では、<p>ブラウザが縮小して「センテンス」のように感じさせる可能性があります。を指定するinitial-scale=1.0と、Opera Mobile はその設定 (デフォルトでは 125%) に合わせて拡大縮小しますが、それを超えることはなく、長い文は折り返されます。

于 2013-04-03T03:07:11.203 に答える
1

クエリに画面を追加して試してみてください。

@media screen and (min-width: 240px) {
    #test{
        width:50px;
        height:50px;
        background-color:blue;
    }
}
@media screen and (min-width: 640px) {
    #test{
        width:50px;
        height:50px;
        background-color:red;
    }
}
于 2013-04-02T11:37:32.607 に答える