targeting iphone4 con design reattivo (query media css) come se la risoluzione più bassa fosse

Question

A questa deve essere stata data risposta in precedenza, ma non riesco a trovare una domanda correlata.

Ho progettato un sito reattivo, con le query media del css che arrivano fino in fondo alla visualizzazione corretta su 320 wide.

Voglio che io sia l'iPhone4 (640 x 960) quando in modalità verticale (640 di larghezza) per aderire alle query multimediali come se fosse display-width = 320 pixel invece. Motivazione: anche se l'iphone ha più pixel, voglio mostrare un layout semplificato a quegli utenti, simile agli utenti di telefoni non ad alta densità.

Un modo per farlo, specificando alcuni meta-tag per questi telefoni ad alta densità di pixel, ad esempio?

Ovviamente, potrei definire media-query separate per iphone 4 e simili con min-device-pixel-ratio: 2 ma questo porta a separare le query media css (una per bassa e una per densità di pixel elevata) che essenzialmente hanno la stessa logica, che non Mi sembra molto ASCIUTTO (http://en.wikipedia.org/wiki/Don%27t_repeat_yourself)

La cosa strana è: il nuovo Ipad 3, con densità di pixel 2, esegue correttamente il rendering nel modo che desidero, ovvero: imita (almeno come le query dei supporti CSS sono interessate) un dispositivo con metà della risoluzione.

Answer 1

L'iPhone 4 (e 4S) risponderanno a questa meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

E 'la parte "iniziale di scala" che siete dopo. Farà in modo che il dispositivo ad alta risoluzione agisca come se fosse largo 320 px (o 480 in orizzontale).

Ci sono other bugs around landscape orientation di cui dovresti essere a conoscenza.

Inoltre, tenete a mente che c'è un orientation parameter available a domande dei media:

@media screen and (orientation:landscape) { 
/* Landscape styles */ 
} 

Answer 2

Primo: Penso che ci sia un errore di battitura nella tua domanda - su un display 640x960, 640 di larghezza è la modalità portait, non paesaggio . Il ritratto è verticale, il paesaggio è orizzontale.

Detto questo, se sto leggendo la tua domanda giusta, stai chiedendo come scegliere un iPhone con display retina usando le query media per la larghezza.

La risposta è che non è possibile - sia l'iPhone con display retina che il display senza retina si riferiscono al browser come 320x240. La differenza, come avrete notato, è che il display retina ha 2x densità di pixel, che può essere bersaglio con media query:

.avatar { 
    display: block; 
    width: 50px; 
    height: 50px; 
    background: url("50x50-avatar.png"); 
} 
@media only screen and (-moz-min-device-pixel-ratio: 2), 
     only screen and (-o-min-device-pixel-ratio: 2/1), 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-device-pixel-ratio: 2) { 
    .avatar { 
    background: url("100x100-avatar.png"); 
    background-size: 50px 50px; 
    } 
} 

Questo esempio è per la visualizzazione di immagini ad alta risoluzione su display retina, ma è possibile utilizzare la stesse tecniche per il layout di tweaking per display retina.

Quindi, in poche parole, scrivi prima i tuoi stili per i display senza retina, quindi aggiungi le sostituzioni del display retina utilizzando le query sui supporti, che dovrebbero evitare i problemi relativi al consumo di sostanze inquinanti.

Ulteriori approfondimenti:

• Retina iPad Specific CSS
• Safari Developer Library: Configuring the Viewport