媒体查询在iPhone失效求助：Android正常，iPhone现崩溃或样式混乱
2026-5-26
解决iPhone上媒体查询失效、页面崩溃的问题
嘿，我来帮你拆解下这个问题——Android端正常但iPhone出问题，大概率和viewport设置或者Safari的CSS兼容性/解析规则有关，咱们一步步来排查：
1. 先检查viewport meta标签（最关键！）
iPhone的Safari默认会把页面渲染在一个980px宽的视口（viewport）里，不管设备实际宽度是多少。如果你的页面没设置正确的viewport标签，那max-width:768px的媒体查询根本不会触发，自然样式会混乱。
你需要在HTML的<head>里加上这行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：让视口宽度匹配设备的逻辑像素宽度initial-scale=1.0：确保初始缩放比例正确
2. 调整媒体查询的写法细节
你当前的媒体查询是：
@media only screen and (max-width:768px) and (orientation : portrait) {}
这里有个可以优化的点：去掉only screen。虽然它是为了兼容旧浏览器，但Safari对only的解析偶尔会有小问题，改成下面的写法试试：
@media screen and (max-width: 768px) and (orientation: portrait) {}
3. 解决iPhone 6s Plus的崩溃问题
页面崩溃大概率是媒体查询内部的CSS代码有问题，Safari对某些CSS属性的容错性比Android浏览器差：
- 检查语法错误：比如有没有遗漏分号、未闭合的大括号，或者错误的属性值（比如把
px写成pxx），这类错误在Android浏览器可能被忽略，但Safari会直接中断样式解析甚至崩溃 - 排查高消耗属性：比如大量嵌套的
box-shadow、filter: blur()这类性能消耗大的属性，iPhone 6s Plus的硬件性能有限，过多的这类属性会导致渲染崩溃 - 精简冗余代码：如果媒体查询里有大量重复的样式或无用选择器，也可能导致Safari的渲染引擎过载
4. 明确逻辑像素的作用
iPhone的物理分辨率很高（比如6s Plus是1080x1920），但它的逻辑像素（也就是CSS里px对应的单位）是414x736（竖屏），所以max-width:768px的媒体查询肯定会匹配，但前提是viewport设置正确——否则浏览器会用980px的默认视口，媒体查询不会触发。
最后，建议你先加好viewport标签，再逐步注释媒体查询内的CSS代码，看看崩溃问题是不是由某一段代码导致的，这样能快速定位问题~
内容的提问来源于stack exchange，提问作者Alina Bayron
