viewport 设置不生效的主因是 meta 标签位置不当或拼写错误，须置于 head 最前且无前置内容；rem 失效因根字体未动态更新；高清屏 1px 发虚需伪元素缩放并加前缀；语义化标签在旧微信 WebView 中需 display: block 兜底。
viewport 设置不生效？检查 meta 位置和拼写
很多 H5 页面在 iOS 或安卓 WebView 中缩放异常，根本原因常是 <meta name="viewport"> 没起作用。它必须放在 <head> 最前面，且不能有任何前置注释或空行，否则部分 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 布局错乱，建议包一层<p class="border-box">
语义化标签在低版本微信 WebView 中不识别？html5shiv 不够用
微信 X5 内核（尤其 6.x 及更早）对 <header><section> 等标签仅解析为普通容器，CSS 选择器失效、无障碍支持丢失。
立即学习“前端免费学习笔记（深入）”；
-
html5shiv只解决 DOM 解析，不修复 CSS 渲染 —— 必须配合display: block显式声明，例如header, section { display: block; } - 微信 6.5.22+ 已支持，但企业微信内置 WebView 仍卡在旧内核，建议用
data-role属性兜底，如<p data-role="header"> - 别依赖
document.createElement('header')：X5 内核下该调用无副作用，必须用document.write('<header></header>')才能触发标签识别（极少数场景才需）
真实项目里最常被忽略的，是 viewport 和 rem 的初始化时机冲突 —— JS 设置 font-size 早于 viewport 生效，会导致首次渲染错乱。得把 setRem() 包进 window.addEventListener('DOMContentLoaded', ...)，而不是 load。
文章来自机圈观察员网，发布者：，转载请注明出处：https://www.jqgcy.com/xitongjiaocheng/124008.html
