viewport单位在Safari失效主因是缺失或重复meta viewport标签；iOS 15+“请求桌面网站”影响vh；max-device-width已弃用，应改用max-width；Safari 15.4前不支持clamp()中使用vh；逻辑属性在旧Edge中与prefers-reduced-motion配合失效。
viewport单位在Safari里突然失效？检查meta viewport是否被覆盖或遗漏
很多开发者发现vw/vh在iOS Safari上不按预期缩放，根本原因常是页面漏了meta name="viewport"标签，或者被JS动态插入的同名标签重复覆盖。Safari对viewport元信息极其敏感，缺失时会强制进入“桌面模拟模式”，此时100vw可能等于980px而非屏幕宽度。
实操建议：
- 确保HTML
<head>中只有一条<meta name="viewport" content="width=device-width, initial-scale=1">，且位置靠前、未被JS重写 - 不要用
document.write()或innerHTML向<head>注入viewport meta——Safari可能已解析完毕，新标签无效 - 在iOS 15+中，若启用了“请求桌面网站”，
vh会按桌面视口计算，此时window.innerHeight与100vh不等，需用JS fallback
媒体查询里混用max-width和max-device-width导致Chrome和Firefox行为不一致
max-device-width早已被现代浏览器弃用（Chrome 87+、Firefox 80+完全忽略），但它仍存在于不少老模板中。实际生效的是max-width，它基于**当前视口宽度**（可被缩放、分屏、DevTools调整），而max-device-width本意是读取设备物理屏幕宽度——但如今连iOS都返回逻辑像素，早已失去意义。
常见错误现象：同一段CSS在Chrome里触发，在Firefox里不触发，或热重载后媒体查询突然失效。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 一律用
max-width，删掉所有max-device-width - 避免用
device-pixel-ratio做关键布局判断——它不可靠，且不能响应式重算；改用image-set()或@supports (color: color(display-p3))做高色域适配 - 在响应式断点中，优先使用
em而非px（如(max-width: 40em)），更贴合用户设置的字体缩放偏好
用clamp()替代媒体查询做流体排版时，Safari 15.4之前不支持vh作为clamp()参数
想用font-size: clamp(1rem, 2.5vw, 1.5rem)实现字号随视口平滑变化？Safari 15.4之前的版本会直接忽略整个声明，因为旧版WebKit不支持在clamp()中混用相对单位（尤其是vh）。这不是bug，是规范实现滞后。
使用场景：标题字号、卡片间距、按钮圆角等需要连续响应的样式。
实操建议：
- 检测支持性：
@supports (font-size: clamp(1rem, 1rem, 1rem)) and (font-size: 1vh)再启用clamp()方案 - 兼容写法：先写固定值fallback，再覆盖
clamp()，例如font-size: 1.25rem; font-size: clamp(1rem, 4vw, 1.5rem); - 注意
clamp()三个参数必须同类型单位（不能rem、vw、px混用），否则整条声明无效
CSS逻辑属性（inset、block-size）在Edge 110以下无法配合@media (prefers-reduced-motion)正确回退
当用inset: 0代替top/right/bottom/left: 0，再叠加@media (prefers-reduced-motion: reduce)关闭动画时，旧版Edge（及部分安卓WebView）会把逻辑属性当作未知声明跳过，导致定位失效，元素塌陷或错位。
性能影响：逻辑属性本身无性能问题，但混合媒体查询后，某些渲染引擎会跳过整个规则块解析。
实操建议：
- 对关键定位（如Modal遮罩、Tooltip箭头），保留传统四边距写法，仅用逻辑属性处理非关键流体区域
- 在
@media (prefers-reduced-motion)内，避免嵌套逻辑属性；改用animation: none+ 显式transform: none更稳妥 - 用
postcss-logical自动补全传统语法，但注意它不处理媒体查询内的逻辑属性降级
真正麻烦的不是写法多，而是不同浏览器对“单位混用”“声明忽略”“媒体查询重解析”的容忍边界完全不同——测一遍iOS Safari + Chrome Android + Edge Legacy比写三遍代码还耗神。
