海信手机WebView存在多重兼容性问题：中低端机型内核老旧致WebGL等API失效；date输入框在Android 7/8崩溃；U7/U8系列flex布局异常；A5/A7机型localStorage静默失败；需真机测试并针对性规避。
海信手机的WebView内核不支持WebGL和部分CSS新特性
海信多数中低端机型（如H90、A6、E8系列）出厂系统WebView基于老旧的Android System WebView或定制Chromium 53–61内核，WebGL、IntersectionObserver、sticky定位、gap属性等直接报错或静默失效。不要依赖caniuse.com查到的“支持”结论——海信常把API声明为存在，但内部空实现或触发crash。
- 检测方式：在页面加载后执行
console.log('webgl', !!window.WebGLRenderingContext && !!document.createElement('canvas').getContext('webgl')); - 替代方案：用
canvas 2D重写图表动效；用position: relative + scroll event模拟position: sticky - 关键规避：避免在
will-change中写transform，海信WebView对此解析异常，导致整个容器白屏
input[type="date"]在海信Android 7/8上点开即崩溃
这是海信深度定制ROM的典型bug：系统级日期选择器Dialog未正确绑定生命周期，input[type="date"]点击后Activity直接NullPointerException退出。不是样式问题，是原生层崩溃。
- 必须替换为自研日期选择器，推荐轻量级方案：
flatpickr（需关闭inline模式，用wrap: true）或vanilla-picker - 禁止使用
mobile-datepicker等依赖cordova-plugin-datepicker的插件——海信禁用大部分Cordova原生桥接 - 隐藏原生控件：对
input[type="date"]加style="opacity:0; position: absolute; pointer-events: none;"，再用label覆盖视觉层，点击时用JS触发自定义picker
flex布局在海信U7/U8系列上子项width失效
海信U7/U8（搭载Android 9+）使用自研渲染引擎“HS-Render”，其flex实现不遵循Flexbox规范第2版，flex-basis被忽略，width在flex: 1子元素中完全不生效。
- 临时修复：将
flex: 1改为flex: 1 1 auto，并显式设置min-width和max-width - 根治写法：放弃
flex单行布局，改用display: grid（海信U系列grid支持完好），例如display: grid; grid-template-columns: 1fr 2fr; - 注意：
flex-wrap: wrap在U8上会导致父容器高度塌陷，必须给父容器设min-height（哪怕min-height: 1px）
localStorage.setItem在海信A5/A7机型上无提示静默失败
海信A5/A7（Android 6.0）系统WebView对localStorage做了内存限制策略：当单次写入超过约1.2MB或总容量超5MB时，setItem不抛错、不返回，但数据实际未保存。用户刷新后丢失所有缓存。
立即学习“前端免费学习笔记（深入）”；
- 必须前置校验：
try { const testKey = '__storage_test__'; localStorage.setItem(testKey, 'x'); localStorage.removeItem(testKey); } catch (e) { // fallback to indexedDB or sessionStorage } - 生产环境强制启用
indexedDB兜底：用localForage库（配置driver: ['indexeddb', 'websql', 'localstorage']） - 严禁在
beforeunload中批量写localStorage——海信该事件触发不可靠，大概率来不及写入
