仅靠min-device-width、max-device-width与像素比能否排除大屏手机？媒体查询适配疑问

嘿，我来帮你搞清楚这个问题～

首先给你吃个定心丸：你写的这个媒体查询在真实的iPhone 5/5s（包括第一代iPhone SE，它的硬件参数和5s完全一致）上是完全有效的，不会误触发iPhone 6、7、8+这些设备。

为什么Chrome移动端模式会出现误触发？ #

Chrome开发者工具的移动端模拟虽然强大，但和真实设备的环境还是有细微差异，大概率是这两个原因导致的：

• 你可能在模拟时没有正确选择对应设备，或者手动调整了viewport的宽度到320-568px范围内，导致媒体查询被触发；
• 部分版本的Chrome模拟中，对device-width的解析和真实设备有偏差，偶尔会把viewport的可视宽度和设备物理宽度混淆。

为什么真实设备上不会有问题？ #

我们来对比一下各设备的核心参数：

• iPhone 5/5s：设备物理宽度320px，像素比2，竖屏设备高度568px，横屏设备宽度568px；
• iPhone 6/7/8：设备物理宽度375px，像素比2，竖屏高度667px；
• iPhone 6+/7+/8+：设备物理宽度414px，像素比3，竖屏高度736px。

你的媒体查询限定了min-device-width:320px和max-device-width:568px，而iPhone 6及以上的设备物理宽度都大于568px，所以在真实设备上根本不会触发这个查询。

更精准的优化版查询（可选） #

如果想进一步避免模拟环境的误判，同时更精准锁定iPhone 5/5s，可以加上屏幕比例的限制（iPhone 5系列是16:9的比例）：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (aspect-ratio: 9/16) { /* 竖屏样式 */
  /* 你的样式代码 */
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (aspect-ratio: 16/9) { /* 横屏样式 */
  /* 你的样式代码 */
}

这样既能在真实设备上精准生效，也能减少Chrome模拟中的误触发情况。

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