为什么我的CSS媒体查询在iPhone上失效_检查viewport视口元标签设置-css教程-PHP中文网

媒体查询在iphone safari上失效，90%以上是viewport元标签缺失、重复或位置错误所致；必须确保唯一且位于最顶部，否则浏览器默认以980px视口渲染，导致max-width媒体查询永不匹配。

为什么我的css媒体查询在iphone上失效_检查viewport视口元标签设置

媒体查询在iPhone Safari上失效，90%以上是viewport元标签缺失、重复或位置错误导致的。 它不是CSS写错了，而是浏览器压根没进入“移动适配模式”，还在用980px默认视口渲染页面。

iPhone Safari解析HTML时，一旦发现

里没有meta name="viewport"，就会强制启用“桌面模拟视口”（layout viewport = 980px），此时@media (max-width: 768px)永远不匹配——因为视口宽度根本不是768，而是980。

检查HTML源码，确认<meta name="viewport" content="width=device-width, initial-scale=1">出现在最顶部，且只出现一次
不要用JS动态插入：document.head.innerHTML += '...'或document.write()在Safari中大概率被忽略
避免服务端模板（如Next.js、Nuxt）因占位符或注释把viewport标签挤到靠后位置——它必须是内第一个或第二个标签

max-device-width在iOS/iPadOS/macOS Safari中早已失效：系统返回的是逻辑像素而非物理屏幕宽度，且该媒体特性已被W3C弃用。你写的@media (max-device-width: 768px)在现代Safari里不会触发。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

媒体查询不是独立模块，它和普通CSS规则共享同一个解析上下文。前面一行CSS语法出错（比如@keyframes缺}、属性漏分号、括号不匹配），可能导致浏览器跳过之后所有规则，包括整个@media块。

打开Safari开发者工具（macOS + iOS配对调试），在Console里看有没有Parse error或Invalid CSS property name
临时删掉所有非必要CSS，只留viewport meta + 一条最简媒体查询（如@media (max-width: 768px) { body { background:red } }），确认是否生效
Parcel等构建工具默认启用cssnano压缩，可能误删未使用的媒体查询；检查.cssnanorc是否配置了discardUnused: false

这个选项只改变vh、vw的计算基准（从视觉视口变为布局视口），@media (max-width: ...)仍按当前视口宽度判断，不受影响。如果你发现媒体查询和vh同时异常，优先排查viewport meta是否被覆盖或重复声明。

真机测试时，下拉地址栏确认是否启用了“请求桌面网站”——它会让100vh变成980px高，但max-width媒体查询照常工作
Safari 15.4之前不支持clamp(1rem, 2vh, 1.5rem)这类含vh的表达式，但@supports检测和max-width查询完全正常
旧Edge中@supports (prefers-reduced-motion: reduce)与逻辑属性组合可能失效，但这和iPhone Safari无关

真正容易被忽略的，是多层框架嵌套场景下的viewport透传问题：父页有正确viewport，iframe里的子页面依然需要自己声明——父页的设置对它完全无效。