Media Css per Iphone6 ​​e Iphone6 ​​plus

Question

Realizzo questo sito Web & Ho effettuato le impostazioni multimediali per dispositivi mobili, tablet, laptop, desktop. Sembrava buono in tutti gli altri telefoni. Non ho ancora controllato sul tablet attuale, ma è corretto sull'emulatore del browser Chrome.

Tuttavia, il mio amico ha controllato il sito nel suo Iphone6 ​​Plus e le impostazioni della barra di navigazione erano incasinate. A proposito, sto usando Bootstrap 3 per il framework.

Sono confuso perché il mio codice funziona su altri telefoni ma non su Iphone6 ​​Plus. Forse anche Iphone6 ​​ha lo stesso problema?

Ecco il mio supporto CSS:

/* Tablet (Portrait) */ 
@media only screen and (max-width : 768px) and (orientation: portrait) { 
} 
/* Phones (Portrait) */ 
@media only screen and (max-width : 480px) and (orientation: portrait) { 
} 
/* Phones (Landscape) */ 
@media only screen and (max-width : 480px) and (orientation: landscape){ 
} 
/* Tablet (Landscape)*/ 
@media only screen and (max-width :1100px) and (orientation: landscape) { 
} 
/* Medium Devices, Desktops and tablet landscape*/ 
@media only screen and (min-width : 992px) { 
} 
/* Large Screens, Large Desktops */ 
@media only screen and (min-width : 1601px) { 
} 

ho già controllato online che la risoluzione densità di pixel & è molto diversa per iPhone6 ​​plus. Abbiamo provato la soluzione da qui: iPhone 6 and 6 Plus Media Queries

Finora, anche quelle query non hanno risolto il nostro problema. Sembra che non ci siano stati cambiamenti. Spero che questo problema possa essere risolto rapidamente, apprezzo il tuo aiuto.

Answer 1

Tutto si riduce al rapporto dispositivo-pixel che prima era 2x per iphone. Nuovo iPhone 6 plus dispone di display retina 3x

/* iPhone 6 landscape */ 
@media only screen and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) 
    { 
    /* Your CSS */ 
    } 

/* iPhone 6 portrait */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) 
    { 
    /* Your CSS */ 
    } 


/* iPhone 6 Plus landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 3) 
    { 
    /* Your CSS */ 
    } 


/* iPhone 6 Plus portrait */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 3) 
    { 
    /* Your CSS */ 
    } 



/* iPhone 6 and 6 Plus */ 
@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px) 
    { 
    /* Your CSS */ 
    } 

ulteriormente più, un articolo da CSS | MDN per aggiungere più supporto per i browser e un fallback.

link: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ 
     (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ 
     (min-resolution: 2dppx),    /* The standard way */ 
     (min-resolution: 192dpi)    /* dppx fallback */ 

un elenco di dispositivi con rispettivo dispositivo-pixel-ratio.

link: https://bjango.com/articles/min-device-pixel-ratio/