4

メディア クエリは、サイズを変更すると PC のブラウザで正常に動作しますが、Android デバイスで localhost を介して Web サイトにアクセスすると、メディア クエリが動作しません。問題は何ですか？私のデバイスの解像度は 480 x 800 ピクセルです。

ここに私のメディアクエリがあります:

@media (max-width: 480px) {
#main{width:90%;position:relative;}
div.itemRelated ul li {float: left;width: 20%;}
div.itemRelated ul li a img{width:90%;}
div.itemRelated ul li a{text-align:center;}
.maincontent{width:90%;font-size:.7em;}
#base{width:100%;}
h2, h2 a:link, h2 a:visited{font-size:.7em;}
#container_header{width:96%;}
#container_slideshow{display:none;}
#container_main{width:90%;margin: 0 auto;}
.wrapper960{margin:0 auto;}/*ova treba da se cepne*/
#sidecol_b, #sidecol_a{display:none;}
#content_remainder{width:96%;clear:both;top:0;}
#container_bottom_modules{display:none;}
#container_spacer3{display:none;}
#jazik{float:left;}
.sigProContainer sigProClassic sigProClassic{margin-left:10%;}
#hornav{padding-left:5px;}
#hornav ul li a{font-size:1em;padding: 0 5px;width:8%}
#container_header{width:100%;}
#socialmedia{display:none;}
#search {clear:both;top: 20%;left: 15%;}
.content{width:66%;}
}
4

3 に答える 3

12

多くの場合、Androidデバイスの幅は実際の画面サイズではありません。画面の幅を知りたい場合は、ビューポートメタタグが必要です。

 <meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

HTMLでこのメタタグを使用する

アップデート：

上記のコードはスケーリング（ズーム）も無効にしますが、これはユーザーにとっては便利ではありません。したがって、次のスケーリングを無効にすることなく実行できます。

<meta id="viewport" name="viewport" content ="width=device-width" />
于 2012-11-25T20:00:49.350 に答える
6

特にAndroidデバイス、またはこれを備えたデバイスをターゲットにしている場合は、480x800これを試してください

@media only screen and (min-device-width: 480px) {
  /* Style goes here */
}

あなたが読むのが好きならかなり良い記事

于 2012-11-25T20:00:56.480 に答える
3

多数の Android デバイスの画面幅と画面密度に関連する同様の問題に遭遇しました。

最終的に、次のメディア クエリに落ち着きました。

@media only screen and (max-width: 765px) {
    /* Style goes here */
}

しかし、これは、より多くのデバイスと向きに固有のメディアクエリを提供する便利なサイトです

于 2012-11-25T20:11:26.330 に答える