Media Css for Iphone6 & Iphone6 plus

Question

I'm making this website & I made the media settings for mobile, tablet, laptop, desktop. It looked good in all other phones. I havent' checked yet on actual tablet, but its fine on the chrome browser emulator.

However, my friend checked out the site in his Iphone6 Plus and the navbar settings were messed up. Btw, I'm using Bootstrap 3 for the framework.

I'm confused why my code is working on other phones but not on Iphone6 Plus. Maybe even Iphone6 have the same problem?

Here is my media 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) {
}

I already checked online that the pixel density & resolution is quite different for Iphone6 Plus. We've tried the solution from here : iPhone 6 and 6 Plus Media Queries

So far, even those queries didn't fix our problem. It seems like there were no changes. I hope this problem could be resolved quickly, I appreciate your help.

Answer 1

Everything comes down to device-pixel-ratio which used to be 2x for iphones. New iphone 6 plus has 3x retina display

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

Further more, an article from CSS | MDN to add more browsers support and a 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 */

A list of devices with their respective device-pixel-ratio.

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