CSS Media Queries for iPhone X / 8 / 8 Plus

Media query is a CSS technique introduced in CSS3. It is a cool way to target different screen sizes, orientations, and devices. Here are CSS Media Queries for iPhone X, 8, and 8 Plus.

---

Media Query for iPhone X

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

Media Query for iPhone 8

@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { }

Media Query for iPhone 8 Plus

@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) { }

---

Add the following rule for portrait and landscape view…

Media Query for Portrait Mode

and (orientation : portrait)

Media Query for Landscape Mode

and (orientation : landscape)