Query multimediale CSS per iPhone 5

L'iPhone 5 ha uno schermo più lungo e non cattura la visualizzazione mobile del mio sito Web. Quali sono le nuove query di progettazione reattiva per iPhone 5 e posso combinare con le query iPhone esistenti?

La mia attuale query multimediale è questa:

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

Un'altra utile funzione multimediale è device-aspect-ratio.

Nota che l' iPhone 5 non ha un formato 16: 9 . Sono in effetti 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Riferimento:
Media Queries @ W3C Calcolatore delle proporzioni di
confronto dei modelli di iPhone

C'è questo, che merito a questo blog :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Tieni presente che reagisce all'iPhone 5, non alla particolare versione di iOS installata su detto dispositivo.

Per unire con la tua versione esistente, dovresti essere in grado di delimitarli con virgola:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: Non ho ancora testato il codice sopra, ma in precedenza ho testato @mediaquery delimitate da virgole e funzionano perfettamente.

Si noti che quanto sopra potrebbe colpire alcuni altri dispositivi che condividono rapporti simili, come il Galaxy Nexus. Ecco un metodo aggiuntivo che prenderà di mira solo i dispositivi che hanno una dimensione di 640 px (560 px a causa di alcune anomalie dei pixel di visualizzazione) e una tra 960 px (iPhone <5) e 1136 px (iPhone 5).

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Tutte queste risposte sopra elencate, che usano max-device-width o max-device-heightper le query sui media, soffrono di un bug molto forte: colpiscono anche molti altri popolari dispositivi mobili (probabilmente indesiderati e mai testati, o che arriveranno sul mercato in futuro).

Queste query funzioneranno per qualsiasi dispositivo che abbia uno schermo più piccolo e probabilmente il tuo design verrà interrotto.

In combinazione con query multimediali simili a dispositivi specifici (per HTC, Samsung, IPod, Nexus ...) questa pratica lancerà una bomba a orologeria. Per debigging, questa idea può rendere il tuo CSS uno spagetti incontrollato. Non puoi mai testare tutti i possibili dispositivi.

Tieni presente che l'unica media query rivolta sempre a IPhone5 e nient'altro è:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Si noti che esatto larghezza e l'altezza , non la larghezza massima sono controllate qui.

Ora, qual è la soluzione? Se vuoi scrivere una pagina web che avrà un bell'aspetto su tutti i possibili dispositivi, la migliore pratica è usare il degrado

/ * modello di degrado stiamo verificando la larghezza dello schermo solo sicuro, questo cambierà passando da verticale a orizzontale * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Se oltre il 30% dei visitatori del tuo sito Web proviene da dispositivi mobili, capovolgi questo schema, fornendo un approccio mobile-first. Utilizzare min-device-widthin tal caso. Ciò accelererà il rendering delle pagine Web per i browser mobili.

per me, la domanda che ha fatto il lavoro è stata:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

iPhone 5 in verticale e orizzontale

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 in orizzontale

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 in verticale

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Nessuna risposta funziona per me come target di un'app phonegapp.

Come indicato dai seguenti link , la soluzione seguente funziona.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Solo un'aggiunta molto rapida in quanto ho testato alcune opzioni e mi sono perso questo lungo la strada. Assicurati che la tua pagina abbia:

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

Puoi ottenere la tua risposta abbastanza facilmente per l'iPhone5 insieme ad altri smartphone nel database delle funzionalità multimediali per dispositivi mobili:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

È anche possibile ottenere i propri valori del dispositivo nella pagina di test sullo stesso sito Web.

(Dichiarazione di non responsabilità: questo è il mio sito Web)

afaik no iPhone utilizza un rapporto pixel di 1,5

iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

Dovresti forse abbassare il "-webkit-min-device-pixel-ratio" a 1,5 per catturare tutti gli iPhone?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}