iphone safari媒体查询失效主因是viewport标签缺失、重复或位置靠后，导致视口默认980px；须确保其唯一且置于head最顶部，禁用max-device-width，改用max-width，并排查css语法错误、加载失败及样式权重覆盖。
检查是否缺失或重复
90% 的 iPhone Safari 媒体查询失效，根源不在 CSS，而在 <meta name="viewport"> 标签没写、写了两次、或被挤到 靠后位置。Safari 一旦没在解析 HTML 早期看到它，就默认用 980px 视口渲染——此时 @media (max-width: 768px) 永远不匹配，因为视口宽度压根不是 768。
必须确保：
-
<meta name="viewport" content="width=device-width, initial-scale=1">唯一存在 - 它位于
内最顶部（最好紧贴开始标签，前面不要有注释、JS 插入、模板占位符） - 绝对不用 JS 动态添加：
document.head.innerHTML += '...'或document.write()在 Safari 中基本无效
别用 max-device-width，改用 max-width
max-device-width 在 iOS/iPadOS/macOS Safari 中已实质失效：系统返回的是逻辑像素而非物理分辨率，且该特性已被 W3C 弃用。你写的 @media (max-device-width: 768px) 在现代 Safari 里根本不会触发。
一律替换为：
-
@media screen and (max-width: 768px)—— 它基于当前视口宽度，可响应缩放、分屏、DevTools 调整 - 如果设了
initial-scale=0.5，视口宽度会翻倍，断点值也要同步放大（例如原max-width: 768px得改成max-width: 1536px） - 避免依赖
device-pixel-ratio做布局判断——它不参与响应式重算，也不可靠
确认 CSS 文件加载成功且无语法错误
媒体查询不是独立模块，它和普通 CSS 共享同一个解析上下文。前面一行 CSS 出错（比如 @keyframes 缺 }、属性漏分号、括号不匹配），浏览器可能直接跳过之后所有规则，包括整个 @media 块。
调试建议：
- 打开 Safari 开发者工具（macOS + iOS 配对），看 Console 是否报
Parse error或Invalid CSS property name - 临时删掉所有非必要 CSS，只留
<meta name="viewport">和一条最简媒体查询（如@media (max-width: 768px) { body { background:red } }），确认是否生效 - 检查网络面板，确认 CSS 文件状态码是 200 且内容完整（尤其注意构建工具如 Parcel、Vite 是否误拆文件）
排查选择器权重与样式覆盖
即使媒体查询语法正确、视口正常，样式也可能被更高优先级的规则静默覆盖。常见现象：你在 Styles 面板里看到目标属性被划掉（strikethrough），点开左侧箭头却找不到自己写的媒体查询规则。
关键检查点：
- 基础样式中是否滥用
!important？比如.btn { padding: 12px !important; }会压制媒体查询里的padding: 4px - 媒体查询块是否放在整个 CSS 文件末尾？否则会被后续声明的基础样式覆盖
- 选择器特异性是否足够？Bootstrap 的
.btn权重很低，建议加父容器限定：.main-content .btn，或用属性选择器：.btn[role="button"] - 如果是 Vue/React 单文件组件，
<style scoped></style>会导致媒体查询内选择器自动加 data 属性，而第三方类（如 Bootstrap）不会——需用:deep(.btn)穿透
@media 都白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
