在移动端适配的实际开发中，不少看似基础的“技术点”，往往是页面翻车的真正元凶。这几个高频踩坑细节，我们一个一个说清楚。
viewport 设置不生效？检查 meta 位置和拼写
很多H5页面在iOS或安卓WebView中缩放异常，根因通常是没有被正确“识别”。它必须放在最前面，前面不能有任何注释或空行——否则部分Android WebView会直接降级为怪异模式。
content值里不要漏掉width=device-width——缺了这句，initial-scale就无效- 避免写
user-scalable=yes，尤其金融、表单类页面，iOS Safari在双击缩放后可能触发意外重排 - 某些旧版UC内核或QQ浏览器对
maximum-scale=1.0支持不稳定，建议只保留width=device-width, initial-scale=1.0
rem 单位失效？根字体大小没随屏幕动态更新
rem适配的常见表现就是：文字在iPad上过大、在小屏手机上过小。本质原因是document.documentElement.style.fontSize没有在resize或orientationchange时重新计算。
- 别只监听
resize：iPad翻转时resize不触发，必须加上orientationchange - 设计稿基准别硬写750：如果UI给的是375宽设计稿，就用
scale = clientWidth / 375，否则缩放比例翻倍 - 避免在CSS里写死
html { font-size: 16px }——虽然JS动态设置会覆盖它，但若JS加载失败，页面就会彻底失配
高清屏 1px 边框发虚？伪元素缩放没做兼容处理
直接写border: 1px solid #ccc，在2x/3x屏幕上实际会渲染成2px/3px，视觉上明显变粗。主流解法是用伪元素配合transform: scale(0.5)，但这里有几个容易忽视的细节。
transform必须带前缀：-webkit-transform和transform都要写，否则iOS 12以下不生效- 伪元素需设置
pointer-events: none，否则可能拦截点击事件（尤其是按钮内部边框） - 别在flex容器子项上直接使用该方案：某些安卓WebView下
transform会导致flex item布局错乱，建议包一层
语义化标签在低版本微信 WebView 中不识别？html5shiv 不够用
微信X5内核（尤其6.x及更早版本）对这类标签只当作普通容器解析，导致CSS选择器失效、无障碍支持丢失。
html5shiv只解决DOM解析，不修复CSS渲染——必须配合display: block显式声明，例如header, section { display: block; }- 微信6.5.22+已支持，但企业微信内置WebView仍卡在旧内核，建议用
data-role属性兜底，比如 - 别依赖
document.createElement('header')：X5内核下该调用无副作用，必须用document.write('才能触发标签识别（极少数场景才用得到）')
真实项目里最容易忽略的，其实是viewport和rem的初始化时机冲突——JS设置font-size早于viewport生效，会导致首次渲染错乱。得把setRem()包进window.addEventListener('DOMContentLoaded', ...)，而不是load。
