Media Css for Iphone6 ​​and Iphone6 ​​plus

Question

I make this site, and I created settings for mobile devices, tablet, laptop, desktop. He looked good on all the other phones. I havent 'tested it yet on the actual tablet, but it works fine on the Chrome browser emulator.

However, my friend checked the site in his Iphone6 ​​Plus, and the navigator settings were corrupted. By the way, I use Bootstrap 3 for the frame.

I am confused why my code works on other phones, but not on Iphone6 ​​Plus. Perhaps Iphone6 ​​has the same problem?

Here are 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 and resolution for the Iphone6 ​​Plus are very different. We tried the solution from here: iPhone 6 and 6 Plus Media Queries

Until now, even these queries have not resolved our problem. It seems that there were no changes. I hope this problem can be resolved quickly, I appreciate your help.

Answer 1

It all comes down to the ratio of pixels to the device, which for iphones was 2x. The new iphone 6 plus has a 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 */ } 

Next, an article from CSS | MDN to add browser support and backup.

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 the corresponding pixel ratio of the device.

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