What are the iPhone 11 / 11 Pro / 11 Pro Max media

问题:

What are the correct CSS media queries used to target Apple's 2019 devices?

The iPhone 11, iPhone 11 Pro and iPhone 11 Pro Max.

回答1:

iPhone 11

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { }

This media query is also for: iPhone XR

---

iPhone 11 Pro

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is also for: iPhone X and iPhone Xs

---

iPhone 11 Pro Max

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is also for: iPhone Xs Max

---

Device orientation

To add landscape or portrait orientation, use the following code:

For portrait:

and (orientation : portrait) 

For landscape:

and (orientation : landscape)