WebView内核差异导致HTML5页面白屏或JS报错，因Android低版本用WebKit、4.4+用Chromium，iOS用WKWebView，造成Promise等新特性不可用；需按WebView版本而非浏览器查兼容性，用core-js@3、regenerator-runtime补全，Autoprefixer配android: '4.4'和ios: '9'，避免100vh、箭头函数、非JSON消息体，并检测serviceWorker支持后再注册。
WebView内核差异会导致HTML5页面白屏或JS报错
Android 4.4+ 默认用Chromium内核，但低版本仍用WebKit（Android Browser），iOS则长期锁定在WKWebView（基于Safari WebKit）。这意味着Promise、async/await、flexbox新语法、IntersectionObserver等特性在旧WebView中直接不可用，不是“显示不一致”，而是根本执行失败——常见现象是页面空白、Uncaught ReferenceError、Cannot read property 'xxx' of undefined。
- 检测手段：在APP启动时注入
navigator.userAgent和typeof window.Promise日志，比单纯查UA更可靠 - 关键兼容库必须按需加载：
core-js@3（非2.x）补全ES6+全局对象，regenerator-runtime支持async，避免全量引入 - 不要依赖
caniuse查“浏览器”，要查“WebView版本”——例如Android 5.0的WebView ≈ Chrome 37，不支持Array.from
CSS渲染错位常因WebView忽略-webkit-前缀或盒模型处理不同
尤其在Android 4.4–5.1和iOS 9–10，display: flex即使写了-webkit-flex也可能被解析为inline而非block，导致子元素换行异常；transform: translateZ(0)在部分旧WKWebView中触发渲染层崩溃，页面卡死。
- 用Autoprefixer配置
targets: { android: '4.4', ios: '9' }生成前缀，禁用remove: false确保保留 - 避免
height: 100vh——iOS Safari/WKWebView中vh在地址栏收起/展开时不会重算，改用height: 100%+position: fixed容器 -
input[type="date"]在Android WebView中无样式且无法触发change事件，必须用flatpickr或vanilla-picker降级
混合通信（JSBridge）在不同WebView中回调时机不一致
Android WebView的addJavascriptInterface在Android 4.2+才默认启用，且要求方法加@JavascriptInterface注解；iOS WKWebView则完全不支持该接口，必须走WKScriptMessageHandler + window.webkit.messageHandlers.xxx.postMessage()。若共用一套JSBridge封装，未做平台判断会直接静默失败。
- 初始化桥接前先判断：
if (window.WebViewJavascriptBridge)（第三方库）、if (window.webkit && window.webkit.messageHandlers)（WKWebView）、if (typeof AndroidBridge !== 'undefined')（原生注入对象） - 回调函数不能是箭头函数——Android 4.4 WebView不支持ES6作用域绑定，
callback => {...}传入后执行时报undefined is not a function - 消息体必须是纯JSON可序列化对象，避免传
Date、RegExp、function，否则iOS WKWebView直接丢弃整条消息
离线资源加载失败多因WebView缓存策略与PWA冲突
Android WebView默认禁用Service Worker（Chrome 72+才支持），iOS WKWebView虽支持但要求HTTPS且首次访问需用户交互才激活；而开发者常把manifest.json和service-worker.js一起部署，结果在WebView里navigator.serviceWorker为undefined，但又没降级逻辑，导致离线页空白。
立即学习“前端免费学习笔记（深入）”；
- 检查
'serviceWorker' in navigator再注册，失败时fallback到localStorage缓存HTML/CSS/JS文本 - WebView中
fetch()默认不带cookie，跨域请求需显式加{ credentials: 'include' }，否则登录态丢失 - Android 7.0+ WebView支持
clearCache(true)，但iOS无等效API，需在原生层调用WKWebsiteDataStore.defaultDataStore.fetchDataRecordsOfTypes清理
