什么是iPhone 11/11 Pro/11 Pro Max媒体查询 [英] What are the iPhone 11 / 11 Pro / 11 Pro Max media queries

问题描述

用于定位Apple 2019设备的正确CSS媒体查询是什么?

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

iPhone 11，iPhone 11 Pro和iPhone 11 Pro Max.

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

推荐答案

iPhone 11

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

此媒体查询还适用于:iPhone XR

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

此媒体查询还适用于:iPhone X和iPhone Xs

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

此媒体查询还适用于:iPhone Xs Max

要添加横向或纵向，请使用以下代码:

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

and (orientation : portrait) 

对于风景:

and (orientation : landscape) 

这篇关于什么是iPhone 11/11 Pro/11 Pro Max媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！