如何使用CSS媒体查询适配iPhone 14（Pro、Pro Max）设备？

以下是针对2022年发布的iPhone 14、iPhone 14 Pro及iPhone 14 Pro Max的精准CSS媒体查询语句，基于设备物理尺寸、分辨率与像素比编写：

iPhone 14（6.1英寸） #

/* iPhone 14 竖屏 */
@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3) {
  /* 自定义竖屏样式 */
}

/* iPhone 14 横屏 */
@media only screen 
  and (device-width: 844px) 
  and (device-height: 390px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
  /* 自定义横屏样式 */
}

iPhone 14 Pro（6.1英寸） #

/* iPhone 14 Pro 竖屏 */
@media only screen 
  and (device-width: 393px) 
  and (device-height: 852px) 
  and (-webkit-device-pixel-ratio: 3) {
  /* 自定义竖屏样式 */
}

/* iPhone 14 Pro 横屏 */
@media only screen 
  and (device-width: 852px) 
  and (device-height: 393px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
  /* 自定义横屏样式 */
}

iPhone 14 Pro Max（6.7英寸） #

/* iPhone 14 Pro Max 竖屏 */
@media only screen 
  and (device-width: 430px) 
  and (device-height: 932px) 
  and (-webkit-device-pixel-ratio: 3) {
  /* 自定义竖屏样式 */
}

/* iPhone 14 Pro Max 横屏 */
@media only screen 
  and (device-width: 932px) 
  and (device-height: 430px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
  /* 自定义横屏样式 */
}

补充说明 #

• -webkit-device-pixel-ratio 是适配苹果高清屏幕的专属属性，确保样式匹配设备像素密度。
• 若无需区分横竖屏，可省略 orientation 条件，仅保留宽高与像素比判断。

内容的提问来源于stack exchange，提问作者Abdul Rafay