viewport 必须含 initial-scale=1.0，否则 iOS Safari 按980px渲染致触控错乱；flex布局需配合响应式（如max-width:100%、min-width:0）；滚动容器须隔离，禁用body滚动；图片热区需动态重算coords或改用SVG。
viewport 设置必须带 initial-scale=1.0
很多页面在 iPhone 上字体忽大忽小、按钮点不中，第一锅就该 viewport 背。只写 width=device-width 不够，缺了 initial-scale=1.0，iOS Safari 会按 980px 宽度渲染再缩放，导致 touch 事件坐标错乱、1px 边框变粗、媒体查询断点失效。
正确写法只有这一种：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">其中
maximum-scale=1.0 和 user-scalable=no 不是必须，但能防用户双指缩放打乱布局；真要支持缩放，至少保留 initial-scale=1.0 强制初始比例归一。
flex 布局别在移动端硬设固定宽度
商品主图+描述左右并排，在桌面端设 width: 480px 很稳，但放到手机上直接溢出。问题不在图片本身，而在容器没做响应式兜底。
- 父容器用
display: flex没问题，但必须加flex-direction: column媒体查询：当屏幕宽 ≤ 768px 时切为上下结构 - 图片侧不要设
width: 480px，改用max-width: 100%+height: auto，确保自然缩放不拉伸 - 文字侧别用
flex: 1硬撑，加min-width: 0防止长单词或 URL 撑破容器（尤其在 Android WebView 中常见）
滚动穿透和吸顶导航必须隔离滚动容器
详情页顶部导航“吸顶”后，一滑就跟着动，或者底部操作栏被顶出屏幕——这不是 JS 没写好，是滚动作用域错了。京东、淘宝等主流电商都把主内容区设为独立滚动容器，body 不参与滚动。
立即学习“前端免费学习笔记（深入）”；
关键三步：
- 给主内容区（比如
<main class="content"></main>）设overflow-y: auto和-webkit-overflow-scrolling: touch（iOS 平滑滚动） - 顶部导航和底部操作栏用
position: sticky或position: fixed，但必须确保它们不在该滚动容器内部 - 禁用
body的滚动：设overflow: hidden，否则手指在导航/操作栏区域滑动时，仍会触发 body 滚动，造成“两个滚动条打架”
图片热区（<map></map>）在移动端几乎必失效
用 <area> 做规格图点击热区，PC 上好使，手机一点没反应——90% 是因为 coords 没重算。浏览器只认图片原始尺寸，CSS 缩放后坐标完全偏移。
不能靠猜，得动态算：
- 监听
img.onload和window.resize，用img.naturalWidth / img.offsetWidth算缩放比 - 遍历所有
<area>，按比例重写coords属性（注意circle和rect的坐标维度不同） - 更稳妥的替代方案是改用 SVG：
<image></image>+<rect></rect>或<path></path>，天然适配 viewBox 缩放，不用 JS 补偿
另外检查 usemap="#xxx" 和 <map name="xxx"></map> 是否严格一致：# 不能少、大小写不能错、name 里不能有空格或特殊字符。
