为何该CSS在iPhone上失效？Android正常显示的适配问题求助

首先得指出你head里的meta标签写法有问题！你把字符编码设置和viewport配置塞进了同一个<meta>标签里，iPhone的Safari浏览器对这种不标准的写法解析非常严格，直接就忽略了这个标签里的viewport设置；而Android浏览器容错性更强，所以能正常识别样式和布局。

正确的写法应该拆分两个独立的meta标签： #

<head>
  <meta charset="ISO-8859-1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="estilos/main.css"/>
  <!-- 你的其他link标签 -->
</head>

补充说明下原因： #

• 字符编码的meta标签标准写法要么是单独的<meta charset="xxx">，要么是旧格式<meta http-equiv="Content-Type" content="text/html; charset=xxx">，绝对不能和viewport的配置混在一个标签里。
• Safari（iPhone默认浏览器）遇到不符合规范的meta标签会直接跳过，导致viewport设置失效，页面无法正确适配移动端，看起来就像是CSS完全失效了（本质是布局没适配，样式显示混乱）。

把meta标签改成上面的标准写法后，再测试iPhone上的显示效果，应该就能解决问题了！

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