İPad/iPhone ve daha eski iPhone'lar için hem de alternatif düzenleri de kullanmaya çalışıyorum.

En iyi yöntem CSS3 spec @media kullanmak için kurdum.

Gibi bu benim medya dakikada sorgular

@media screen and (max-width: 1000px) { ... }

Yukarıda küçük masaüstü ve dizüstü bilgisayar ekranları için.

@media screen and (max-width: 700px) { ... }

Yukarıda iPad ve ÇOK küçük masaüstü/dizüstü bilgisayar ekranları için.

@media screen and (max-device-width: 480px) { ... }

Yukarıda genel olarak iPhone 3G ve mobil cihazlar.

Ancak, yeni iPhone 4 ile Steve Jobs tüm-şarkı-dans "retina" Ekran anlamına gelen bir piksel oranı 2-1 anlamı 1 piksel aslında göründüğü için tarayıcı olarak 2x2 piksel yapım çözünürlüğü (960x640 anlamı olacak tetikleyici iPad düzeni yerine mobil cihaz düzeni) bunu gerektirir BAŞKA bir medya sorgu (sadece şimdiye kadar desteklenen tarafından y):

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

Olay şu ki her ikisi de tam olarak aynı iç CSS kodu var, onlar gibi... güzel parlak yeni iPhone 4 benim düzeni iPhone 3G ve mobil cihaz düzeni ile amalgamated istiyorum

Bu nedenle sorumu yapma;

Nasıl aynı stilleri için her iki iPhone 4, 3G ve diğer cep telefonlarına puan @media bir kural oluşturabilirim?

Çünkü iPhone ve iPod touch ölçü max-device-width mantıksal piksel yerine fiziksel piksel bile Retina Ekran (gerektiği), orijinal ortam sorgusu için iPhone yeterli olmalı:

@media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}

Sadece Retina Ekran ayrı ayrı hedef gerekiyorsa (-webkit-min-device-pixel-ratio: 2) gerekir.