移动端页面必须显式声明viewport meta标签，否则iOS Safari等会以980px宽度渲染导致缩放问题；最简写法为<meta name="viewport" content="width=device-width, initial-scale=1.0">，其中width=device-width是核心，禁用user-scalable=no和maximum-scale=1.0以保障可访问性与兼容性。
viewport meta 标签必须显式声明
移动端页面不加 <meta name="viewport">，iOS Safari 和多数安卓浏览器会默认以 980px 宽度渲染，导致内容被缩放、点击区域变小、字体模糊。这不是“样式没写好”，是根本没进入响应式流程。
最简可用写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
注意以下三点：
-
width=device-width是核心，它让视口宽度等于设备物理像素宽度（经 dpr 换算后的 CSS 像素），不是固定值 - 避免写
user-scalable=no—— 屏幕阅读器、视力障碍用户依赖双指缩放，禁用会违反 WCAG - 不要写
maximum-scale=1.0或minimum-scale=1.0，它们在 iOS 10+ 上已失效，且干扰 pinch-zoom 行为
img 和 iframe 默认不响应式，需手动约束
HTML5 中 <img> 和 <iframe> 默认按原始尺寸渲染，超出容器时不会自动缩小，容易撑破布局，尤其在窄屏上出现横向滚动条。
立即学习“前端免费学习笔记（深入）”；
通用修复方式（CSS）：
img, iframe {
max-width: 100%;
height: auto;
}
补充说明：
-
max-width: 100%是关键，width: 100%会导致小图被强行拉伸失真 - 对
<picture>+<source>组合，仍需给外层<picture>或<img>加该规则 - 视频
<video>同理，需单独加样式，不能依赖 poster 图片的响应式行为
touch-action 和 cursor 在移动端要慎用
PC 端常用的 cursor: pointer 或 touch-action: manipulation 在部分安卓 WebView 或旧版 UC 中表现不一致，可能引发点击延迟、手势冲突或伪类失效。
推荐实践：
- 按钮类交互元素，优先用
<button>或带role="button"的<div>，而非仅靠cursor视觉提示 - 需要禁用双指缩放但保留滚动时，用
touch-action: pan-x pan-y，比manipulation兼容性更好 - 避免在
<body>或根容器上设touch-action: none—— 这会直接禁用所有原生滚动，包括 overflow-y:auto 的区域
flexbox 和 grid 在 iOS Safari 旧版本有渲染 bug
iOS 9–12 的 Safari 对 flex 的 min-height、align-items: stretch 和 grid-template-rows: 1fr 支持不稳定，常见现象是子项高度塌陷、内容截断、滚动异常。
绕过方案（非 hack，是兼容性兜底）：
- 对 flex 容器，显式设置
min-height: 0（尤其当父容器有overflow: hidden时） - 避免单用
1fr布局全屏区域；改用grid-template-rows: minmax(0, 1fr) auto或加min-height: 100vh - 测试时务必在真机 iOS 11.4 和 12.5 上验证，模拟器无法复现部分渲染管线问题
这些不是“过时的兼容性问题”，而是至今仍有大量企业内网设备停留在 iOS 12，且其 WebView 内核未随系统更新。
