IPhone CSS3 media query and iPhone ecss3 Media

IPhone CSS3 media query and iPhone ecss3 Media

CSS3 media query for iPhone:

For various versions of iPhone media queries, media queries are implemented based on their resolution and some CSS3 media queries. For details, see:

 

Media query for iPhone 6:

@ Media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {/* iPhone 6 Portrait */} @ media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {/* iPhone 6 landscape */} @ media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) {/* iPhone 6 + Portrait */} @ media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {/* iPhone 6 + landscape */} @ media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px ), only screen and (max-width: 480px) {/* iPhone 6 and iPhone 6 + portrait and landscape */} @ media only screen and (max-device-width: 640px ), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation: portrait) {/* iPhone 6 and iPhone 6 + portrait */} @ media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation: landscape) {/* iPhone 6 and iPhone 6 + landscape */View Code

Reference: CSS3 media query of iPhone 6

Differences between version resolutions of mobile phones and actual resolutions in CSS:

Referenced from: mydevice. io