网站在iPhone Safari中无法正确显示，移动端适配问题求助
2026-5-15
解决iPhone Safari中移动端/桌面端内容同时显示的问题
嗨，我之前做移动端适配时也踩过Safari的这个坑，给你几个实用的排查方向和修复方案：
最可能的根源：缺少视口元标签
iPhone Safari默认会用桌面端的视口宽度（比如980px）来渲染页面，如果你没设置视口元标签，媒体查询里的max-device-width:480px根本不会触发！赶紧在页面的<head>里加上这行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这行代码会让浏览器把视口宽度设置为设备的物理宽度，媒体查询才能正常工作。
替换max-device-width为max-width
Safari对max-device-width的兼容性不如max-width可靠——device-width指的是设备的物理分辨率宽度，而max-width是视口宽度，更符合我们的适配需求。修改你的CSS：
/* 默认隐藏移动端专属内容 */ .mobile_device_480px { display: none; } /* 适配屏幕宽度≤480px的设备 */ @media only screen and (max-width: 480px) { .mobile_device_480px { display: block; } .desktop { display: none; } }
如果担心覆盖不全，也可以同时写两个条件：@media only screen and (max-device-width: 480px), only screen and (max-width: 480px)
排查缓存与样式优先级问题
- iPhone Safari的缓存很顽固，试试用隐私浏览模式打开页面，或者手动清除浏览器缓存后再测试；
- 检查你的CSS中有没有其他规则覆盖了
display:none——比如有没有给.desktop或.mobile_device_480px加过内联样式、!important标记？可以用Safari的开发者工具（连接电脑开启Web Inspector）查看元素的「计算样式」，看哪个规则在生效。
临时排查小技巧
如果还是没解决，可以临时给display:none加上!important来测试是否是优先级问题：
.desktop { display: none !important; }
但注意这只是临时排查手段，找到冲突的根源后最好去掉!important，保持CSS的可维护性。
内容的提问来源于stack exchange，提问作者John Doe Python
