为何@media only screen仅调整窗口大小时触发，iPhone 7 Plus上不生效

问题产生原因 #

• 缺少viewport元标签是最常见诱因：移动端浏览器默认使用宽度为980px的虚拟视口渲染页面，此时布局视口宽度远大于600px，因此max-width: 600px的媒体查询规则不会触发。
• 断点值设置不合理：iPhone 7 Plus横屏状态下逻辑宽度为736px，超过你设置的600px断点，横屏访问时自然不会触发规则；PC端浏览器模拟移动设备时，窗口宽度计算会包含滚动条宽度，实际布局视口宽度和你设置的模拟尺寸存在差值，也会导致规则异常触发。
• 媒体查询优先级问题：如果CSS中存在权重更高、或顺序更靠后的同类型规则，会覆盖当前断点的样式，造成规则未触发的假象。
• 该问题和设备的user-agent-string没有任何关联。

修复方案 #

1. 首先在页面<head>标签内添加viewport元标签，强制布局视口与设备宽度保持一致：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 调整媒体查询断点值，建议将移动端断点设为768px，覆盖绝大多数移动设备的竖屏场景，避免Plus类大屏手机适配异常：

@media only screen and (max-width: 767px) {
  img {
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0;
  } 
  a.box {
    width: 100%;
    padding: 14px 15px;
    font-size: 0.75em;
  }
}

3. 检查所有CSS媒体查询的排列顺序，确保小屏断点的规则写在大屏断点规则之前，避免出现样式覆盖。
4. 若需要针对高DPI苹果设备做特殊适配，可扩展媒体查询的条件：

@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
  /* 高DPI移动设备专属样式 */
}

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