0

iOS シミュレーターを使用して、レスポンシブ テーマのメディア クエリをさまざまな iOS デバイスでテストしていますが、以下のメディア クエリがレンダリングされません。w3.org メディア クエリ標準に加えて、このブログ投稿、A List Apartの Pixel Identity Crisis 、およびMozilla のブログ投稿をいくつか参照しましたが、何がクエリを壊しているのかわかりませんよね?

/*-- iPhone 4, 4S Retina -----------------------*/

@media 
screen and (min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-o-min-pixel-ratio:2/1) and (min-width:320px) and (max-width:600px), 
screen and (min--moz-pixel-ratio:2) and (min-width:320px) and (max-width:600px),/* Firefox browsers prior to FF 16) */
screen and (min-resolution:2ddpx) and (min-width:320px) and (max-width:600px) {
   /*styles here */
}


/*------- iPhone 2G, 3G, 3GS  -------------*/
@media  
screen and (max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-o-max-device-pixel-ratio: 1/5) and (min-width: 320px) and (max-width: 600px),
screen and (max--moz-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px), /* Firefox browsers prior to FF 16) */
screen and (max-resolution: 1.5ddpx) and (min-width: 320px) and (max-width: 600px) {
   /*styles here*/
}
4

1 に答える 1

0

iOSのみをターゲットにしている場合（opera / firefoxについて心配する必要はありません）、メディアクエリを次のように安全に短縮できます。

/*-- iPhone 4, 4S Retina -----------------------*/
@media screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px) {
   /*styles here */
}

/*------- iPhone 2G, 3G, 3GS  -------------*/
@media screen and (min-width: 320px) and (max-width: 600px){
   /*styles here*/
}

あなたのサイトがそれらを必要とするならば、そこに(orientation: landscape)/を持っていることも良い考えかもしれません。(orientation: portrait)

于 2012-11-20T15:45:51.707 に答える