Retina iPad Specific CSS

Sto progettando un sito reattivo che avrà un aspetto diverso sui dispositivi mobili. Ho tre query multimediali separate nel mio css più una query per i display retina (s).Retina iPad Specific CSS

/** 768PX IPAD PORTRAIT **/ 
@media screen and (max-width: 768px) {} 

/** 480PX IPHONE LANDSCAPE **/ 
@media screen and (max-width: 480px) {} 

/** 320PX PORTRAIT **/ 
@media screen and (max-width: 320px) {} 

/** RETINA IMAGES **/ 
@media all and (-webkit-min-device-pixel-ratio: 2) {}

Quando iPad è in modalità verticale, otterrà la versione mobile, ma quando è in modalità orizzontale otterrà la versione normale del sito.

Il mio problema è questo, ora con il "nuovo iPad" e il display retina, alcune immagini retinate non sono allineate correttamente per la versione iPad retina del paesaggio. La retina globale css sta annullando il normale css e suppongo che io indovino.

Ad esempio, nella versione mobile, ho un'immagine di sfondo centrata sullo schermo, ma sul sito normale, è allineata a sinistra.

Qualcuno sa di un modo per scegliere come target solo le immagini retinate per iPad solo in CSS?

Grazie

Edit: Questo è quello che stavo giocando intorno con, ma non sembra funzionare:

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}

fonte

2012-03-20 user127181

Il nuovo iPad è 2048-1536 ... prova questo e il rapporto pixel: 2 – Connor

Grazie per la risposta, l'ho provato, no, ancora non funziona. @media screen e (min-device-width: 1536px) e (max-device-width: 2048px) e (orientation: landscape) e (-webkit-min-device-pixel-ratio: 2) {} – user127181

Hai visto la mia risposta, e stai usando un vero iPad3, giusto? – Connor

provare:

@media only screen 
    and (min-device-width: 1536px) 
    and (max-device-width: 2048px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 
     // Retina iPad specific CSS 
}

fonte

2012-03-20 19:39:15 Connor

Ciao, sì ho visto la tua risposta ma non funziona. Tuttavia sto usando solo il simulatore iOS. Tutte le mie altre domande sui media funzionano comunque usando il simulatore. Sono perplesso. – user127181

Non riesco a farlo funzionare sul mio ipad Retina. lo ignora ogni volta. Se lo cambio in @media screen e (max-width: 960px) e (orientation: landscape) e (-webkit-device-pixel-ratio: 2) funziona. Ho triplicato il controllo per assicurarmi che il mio ipad sia, di fatto, una retina per iPad (e non sono stato truffato) e il numero del modello torna come Retina iPad legittima. Pensieri? – MatthewLee

@MatthewLee Hmmm, la mia ipotesi migliore ora è che abbia a che fare con larghezza massima rispetto alla larghezza massima del dispositivo. Stai usando un iPad 3 o 4? – Connor

capito.

Ho avuto la mia query Retina iPad al di sotto di tutte le altre query, ma hanno dovuto essere al di sopra delle altre query a partire dal più grande al più piccolo.

fonte

2012-03-21 19:01:58 user127181

+10

Devi accettare la tua risposta come risposta corretta e inserire il codice corretto che hai usato quindi c'è sempre un riferimento dalla tua domanda iniziale al corretto rispondi con il codice corretto. Grazie. –

Ho avuto lo stesso problema e ho risolto utilizzando:

@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) and (-webkit-device-pixel-ratio: 1.5)

Per meta viewport che uso:

content="width=device-width; initial-scale=1; maximum-scale=1"

Non so se questa è una soluzione perfetta, ma funziona.

fonte

2012-06-27 07:11:22 Walli

Retina iPad Specific CSS

risposta

Problemi correlati