1

スマートフォンで自分のウェブサイトのモバイル版を表示するために、いくつかのルールを作成しました。

モバイルルールは、デフォルトのスタイルシート（http://www.flapane.com/style.css）の下部に「@media」を使用して含まれています。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px), only screen and (orientation : landscape) and (min-device-width : 480px) and (max-device-width : 800px), only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1)
 { [CODE]
}

480x800のAndroidデバイスでテストに成功しました。横向きモードと縦向きモードの両方で機能します。（http://i.imgur.com/mhqhr.png）

しかし、私はそれを数人の友人のiPhone4でテストしました、そしてデスクトップバージョンは常に表示されます。

ただ使ってみました

@media only screen and (-webkit-min-device-pixel-ratio : 2)

しかし、何も変わりませんでした。

ヒントはありますか？ありがとう

4

2 に答える 2

0

次のように変更@media only screen and (-webkit-min-device-pixel-ratio : 2)します。

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)

この例のように、動作しているはずです。そのページは、後で参照するための良いブックマークでもあります。

于 2012-06-09T18:47:10.900 に答える
0 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px), only screen and (min-device-width : 480px) and (max-device-width : 800px) and (orientation : landscape), only screen and (device-width: 768px), only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5)

iPhoneでも動作するようです

于 2012-06-11T16:48:01.270 に答える