iPhone端媒体查询失效问题排查与解决求助

你的问题根源在于媒体查询的语法不符合标准，iPhone默认的Safari浏览器不支持你使用的反向比较写法，导致规则无法生效。

错误点分析 #

你写的媒体查询：

@media(435px>=width) {
   body{
      background-color: #e64f4f;
   }
}

这种值>=属性的反向写法属于非标准语法，仅部分浏览器兼容，Safari（包括iOS端）不支持该格式，必须使用标准的max-width媒体特性来表达“宽度小于等于指定值”的逻辑。

解决方案 #

将媒体查询修改为标准语法即可：

body{
   background-color: #000;
}
@media (max-width: 435px) {
   body{
      background-color: #e64f4f;
   }
}

你的HTML中的viewport meta标签配置是正确的，无需修改。修改CSS后，iPhone设备在屏幕宽度≤435px时会正常显示红色背景，其他设备也能保持原有响应式逻辑。

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