5

CSSファイルでメディアクエリを使用して、Webサイトのレスポンシブテーマを開発しました。

iPad/iPhone および小型の Android フォンで正常に動作します。Galaxy S2 に到達すると、メディア クエリが無視されるようです。

これは、Galaxy S2 などをターゲットにするために使用しているメディア クエリです。これは正しいですか? もしそうなら、なぜそれが機能していないのですか?

@media only screen and (min-device-width : 480px) and (max-device-width : 800px)

ありがとう

4

5 に答える 5

8

コードは機能するはずです。

次のような「方向」を追加しようとしましたか？

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) {

}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) {

}
于 2012-05-16T20:39:42.773 に答える
1

Samsung Galaxy S2 のメディア クエリは、次のコードのようなもので、1.5 を使用する必要があり-webkit-device-pixel-ratioます。これですべてです。

/* Samsung Galaxy S2 ----------- */
/* Portrait and Landscape */
@media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5){
    /* Styles */
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-height: 533px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 1.5){
    /* Styles */
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-height: 533px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 1.5){
    /* Styles */
}
于 2018-08-22T13:29:39.343 に答える
0

これも一見の価値があるかもしれません：@media all and (device-aspect-ratio: 3/5)。

http://cssmediaqueries.com/から取得した情報

于 2012-11-14T15:33:59.437 に答える