微博H5适配需设viewport为width=device-width、user-scalable=0；rem计算须在head中立即执行并fallback至375；fixed元素禁用transform，底部用env(safe-area-inset-bottom)；图片必须HTTPS且字体加crossorigin，onerror不触发需主动探测。
微博 HTML5 页面如何做 viewport 适配
直接加 是基础，但微博 H5 经常因缩放异常或双击放大失效被投诉。关键不是“有没有”，而是content 值是否匹配微博客户端的 WebView 行为。
- 必须设
width=device-width，不能写死成width=375或width=750 - 禁用用户缩放：
user-scalable=no在微博 Android 客户端（v14+）会触发强制重绘，建议改用user-scalable=0（兼容性更好） - iOS 微博内嵌 WebView 对
initial-scale=1.0敏感，若页面有 rem 动态计算，需确保 JS 初始化早于 DOM 渲染，否则可能闪动
rem 适配在微博客户端里为什么失效
微博 Android 和 iOS 客户端的 WebView 对 document.documentElement.style.fontSize 的设置时机响应不一致。常见现象是：页面加载完成才执行 rem 计算，导致首屏文字过小或过大。
- 不要等
window.onload或DOMContentLoaded再设置根字体——微博客户端可能已渲染部分内容 - 推荐在
中立即执行 JS，用document.documentElement.clientWidth计算，而非window.innerWidth（后者在微博 iOS 中常返回错误值） - 注意：微博 Android v13.8.0–v14.2.0 存在
clientWidth返回 0 的 bug，需加 fallback：检测为 0 时默认按 375 设计稿宽度计算
fixed 元素在微博 H5 里错位或消失
微博客户端对 position: fixed 的实现有特殊处理，尤其在软键盘弹出、页面滚动后，top/bottom 偏移量容易失准。
- 避免对
fixed元素同时设置transform（如translateZ(0)），这会触发微博 Android 的层叠上下文 bug - 底部导航栏等关键
fixed区域，建议用bottom: env(safe-area-inset-bottom)兼容微博 iOS 的刘海屏，但需检测CSS.supports('bottom: env(safe-area-inset-bottom)')，否则部分旧版本会失效 - 如果使用 Vue/React，注意
v-show切换fixed元素时，微博 iOS 可能不重绘，应改用v-if或手动触发布局（offsetHeight读取）
图片和字体资源在微博内打开特别慢
微博客户端默认启用「流量节省模式」，会对非 HTTPS 图片、未声明 crossorigin 的字体、以及未压缩的 PNG 自动降级或拦截。
立即学习“前端免费学习笔记（深入）”；
- 所有图片必须走 HTTPS，HTTP 链接在微博 Android v14+ 会被静默替换为占位图
- WebFont（如 iconfont）必须加
crossorigin属性： - 微博 iOS 对
srcset支持不全，建议只用单图 +picture+media做断点，避免用w描述符
最常被忽略的一点：微博客户端不会触发 img.onerror，所以 fallback 图片逻辑要靠 service worker 或主动探测 URL 状态，不能依赖原生事件。
