Media Css dla Iphone6 ​​i Iphone6 ​​plus

Question

Tworzę tę stronę internetową & Zrobiłem ustawienia multimediów dla telefonów komórkowych, tabletów, laptopów, komputerów stacjonarnych. Wyglądało dobrze we wszystkich innych telefonach. Nie sprawdziłem jeszcze na prawdziwym tablecie, ale jest to w porządku na emulatorze przeglądarki Chrome.

Jednakże, mój przyjaciel sprawdził stronę w swoim Iphone6 ​​Plus i ustawienia navbar zostały pomieszane. Btw, używam Bootstrap 3 dla frameworka.

Jestem zdezorientowany, dlaczego mój kod działa na innych telefonach, ale nie na Iphone6 ​​Plus. Może nawet Iphone6 ​​ma ten sam problem?

Tu jest mój css mediów:

/* 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) { 
} 

już sprawdzone w Internecie, że rozdzielczość gęstość pikseli & jest zupełnie inna dla Iphone6 ​​Plus. Wypróbowaliśmy tutaj rozwiązanie: iPhone 6 and 6 Plus Media Queries

Do tej pory nawet te zapytania nie rozwiązały naszego problemu. Wygląda na to, że nie było żadnych zmian. Mam nadzieję, że ten problem można szybko rozwiązać, doceniam twoją pomoc.

Answer 1

Wszystko sprowadza się do proporcji urządzenia do pikseli, która była kiedyś 2x dla iPhone'ów. Nowy iPhone 6 plus ma 3-krotny wyświetlacz Retina

/* 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 */ 
    } 

Co więcej, artykuł z CSS | MDN, aby dodać obsługę większej liczby przeglądarek i awarię.

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 */ 

lista urządzeń z ich odpowiednimi urządzenia piksela stosunku.

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