多数Safari适配问题源于viewport meta缺失或错误，而非媒体查询语法错误；必须写入<meta name="viewport" content="width=device-width, initial-scale=1">，且不可被JS动态覆盖，否则@media (max-width: 768px)等规则根本不会触发。
多数 Safari 适配问题不是 Media Queries 写错了，而是它根本没触发——缺 viewport meta、用错单位、或误信已废弃的特性（比如 screen-spanning）。
viewport meta 标签漏掉或写错
Safari（尤其 iOS）对 viewport 的依赖远高于 Chrome。没这行，@media (max-width: 768px) 就算写得再准也永远不匹配。
- 必须有：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 别写
width=375或user-scalable=no（后者会禁用双指缩放，WCAG 不合规，且某些 WebView 下干扰 orientation 判断） - JS 动态覆盖
viewport会导致媒体查询失效——检查是否在 onload 后又执行了document.querySelector('meta[name=viewport]').setAttribute(...)
orientation 查询在 Safari 中延迟或不触发
@media (orientation: landscape) 在 Safari 中不是旋转即生效，而是等重排完成，且依赖视口尺寸真实变化。常见现象是横屏后样式卡住半秒才切。
- 不要单独用
(orientation: landscape)做关键布局切换，改用组合条件：@media (orientation: landscape) and (min-height: 480px) - 首次加载时需手动检查状态：
const mql = window.matchMedia('(orientation: landscape)'); if (mql.matches) { /* 初始化横屏样式 */ } - 别用已废弃的
window.addEventListener('orientationchange')——它只读陀螺仪角度，和 CSS 渲染方向不同步
折叠屏识别完全失效
Safari 目前（2026 年 7 月）仍不支持 horizontal-viewport-segments 和 vertical-viewport-segments，所有基于这两个特性的规则在 Safari 中直接被忽略，连降级逻辑都跑不起来。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 不能靠
@supports (horizontal-viewport-segments: 2)包裹来“安全使用”——Safari 连@supports里这个条件都不识别，整块规则跳过 - 想兼容折叠屏，只能退回到传统断点 + JS 检测：
visualViewport?.width配合防抖（但注意：iframe 内不可用） - 避免在 Safari 环境下同时定义
horizontal-viewport-segments和vertical-viewport-segments规则——CSS 变量如--fold-state会被后声明的覆盖，而 Safari 根本不解析前者
字体与 rem 缩放不生效
在 Safari 中改 :root { font-size: 14px; } 经常无效，不是语法错，而是继承链被父级 font-size 截断或单位混用。
- 确保所有字体相关属性（
font-size、line-height、letter-spacing）都用rem，别混用em或px - 别在 media query 里只改某一层元素的
font-size，统一在:root上调：@media (max-width: 768px) { :root { font-size: 14px; } } - 如果用了
clamp()，Safari 16.4+ 才完整支持，旧版需 fallback 到 media query
最麻烦的不是写错，而是你以为 Safari 支持某个特性（比如 orientation），其实它只部分实现或延迟响应；更隐蔽的是 viewport meta 被 JS 覆盖、或者 visualViewport 在 iframe 里静默失败——这些地方不报错，只让样式“看起来没动”。
