2012-04-27 18 views
0

Googleを使ってiPhoneをターゲットにしたメディアクエリーをいくつか試してみましたが、私のサイトはまだ実際のiPhoneのように表示されません。 iphone4simulator.comを使用するとうまく見えます。ここで私が今使っているメディアクエリです:cfbpreview私のiPhoneでCSSクエリが機能していない

ありがとう:

@media only screen and (device-width: 480px) and (orientation: portrait) and (resolution: 163dpi) 

はここURLです。

答えて

0

iPhone 4用にこれを追加する必要があります。これは、網膜ディスプレイのためです。ここで

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

は、あなたが反応する設計に必要な場合がありますlink to all media queriesです。

重要:これはピクセル比が1.5以上のすべてのデバイスに適用されます。デバイス固有のものにしたい場合は、meidaクエリに条件を追加する必要があります。

+0

iPhone 4よりも多くをターゲットにしていることに注意してください。最新のハイエンドのAndroid搭載携帯電話にも当てはまります。 – ceejayoz

+0

もちろん。ピクセル比が1.5以上のすべてのデバイスを対象とします。それはあなたが望むものです。このメディアクエリでは、より高解像度の画像やその他の変更を網膜ディスプレイデバイスに配置することができます。 iPhone 4固有のものにしたい場合は、そのデバイス固有の条件を追加する必要があります。 – Karl

+0

ユーザーは「iPhoneをターゲットにする」と言っていたので、Androidデバイスが必要ないかもしれません。ちょうど私がそれを指摘したいと思った。 – ceejayoz

関連する問題