iPhone X / 8 / 8 Plus CSS media queries
Here are some of the following media queries for iPhones. Here is the ref link https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
/* iphone 4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6, 6s, 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone X , XS, 11 Pro, 12 Mini */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone 12, 12 Pro */
@media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone XR, 11 */
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }
/* iphone XS Max, 11 Pro Max */
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }
/* iphone 12 Pro Max */
@media only screen and (min-device-width : 428px) and (max-device-height : 926px) and (-webkit-device-pixel-ratio : 3) { }
I noticed that the answers here are using: device-width
, device-height
, min-device-width
, min-device-height
, max-device-width
, max-device-height
.
Please refrain from using them since they are deprecated. see MDN for reference. Instead use the regular min-width
, max-width
and so on. For extra assurance, you can set the min and max to the same px amount.
For example:
iPhone X
@media only screen
and (width : 375px)
and (height : 812px)
and (orientation : portrait)
and (-webkit-device-pixel-ratio : 3) { }
Here are a few useful links on this subject:
- https://medium.com/@hacknicity/how-ios-apps-adapt-to-the-iphone-x-screen-size-a00bd109bbb9
- https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
- https://ivomynttinen.com/blog/ios-design-guidelines
- https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
iPhone X
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 8
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
iPhone 8 Plus
@media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 6+/6s+/7+/8+ share the same sizes, while the iPhone 7/8 also do.
Looking for a specific orientation ?
Portrait
Add the following rule:
and (orientation : portrait)
Landscape
Add the following rule:
and (orientation : landscape)
References:
- https://webkit.org/blog/7929/designing-websites-for-iphone-x/
- https://developer.apple.com/ios/human-interface-guidelines/visual-design/adaptivity-and-layout/
- https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
- https://mydevice.io/devices/
- http://viewportsizes.com/mine/