传音手机HTML5支持存在兼容性问题：IntersectionObserver和ResizeObserver不被广泛支持，低端机型WebView内核陈旧（Android 4.4 WebKit），localStorage常被禁用或限制；需实测API而非依赖UA，建立分层降级策略。
传音手机（Tecno、Infinix、Itel）对 HTML5 的支持整体符合标准，但存在若干关键兼容性问题——不是所有机型都支持 IntersectionObserver、ResizeObserver，部分低端机型 WebView 内核陈旧（基于 Android 4.4 的 WebKit），且默认禁用 localStorage 或限制其容量。直接按 Chrome 最新行为开发，大概率在传音设备上白屏或交互失灵。
传音机型常见 WebView 内核与检测方式
传音多数中低端机型使用系统级 WebView（Android 4.4–6.0 常见），而非 Chrome 定制内核；高端机型（如 Tecno Phantom V 系列）才逐步启用 Chromium-based WebView。不能依赖 navigator.userAgent 中的 “Chrome” 字样判断能力，需实测特征 API。
- 优先检测
'serviceWorker' in navigator—— 传音大部分机型返回false，即使系统显示 Android 8.1 - 检查
typeof window.ResizeObserver === 'function'，传音 TECNO Camon 12 等机型返回undefined - 用
try { localStorage.setItem('test', '1'); } catch(e) { console.warn('localStorage blocked'); }主动捕获写入失败
localStorage 被拦截时的降级方案
传音部分机型（尤其是 Itel 手机）在隐私模式或系统设置中默认关闭 DOM 存储，localStorage 抛出 SecurityError，而非静默失败。不处理会导致 JS 报错中断后续逻辑。
function safeLocalStorage() {
try {
const key = '__test__';
localStorage.setItem(key, '1');
localStorage.removeItem(key);
return localStorage;
} catch (e) {
// 降级为内存对象 + sessionStorage（部分机型 sessionStorage 可用）
const memStore = {};
return {
getItem: k => memStore[k] || null,
setItem: (k, v) => { memStore[k] = String(v); },
removeItem: k => delete memStore[k],
clear: () => Object.keys(memStore).forEach(k => delete memStore[k])
};
}
}
const storage = safeLocalStorage();
IntersectionObserver 不可用时的手动懒加载
传音大量机型（如 Infinix Hot 12 Play）不支持 IntersectionObserver，但又需要图片懒加载。不能简单 fallback 到 getBoundingClientRect() 频繁轮询，否则卡顿明显。
立即学习“前端免费学习笔记（深入）”；
- 改用
scroll+requestAnimationFrame节流检测：只在滚动停止后 100ms 再计算可见区域 - 避免监听
window滚动，改为监听容器元素（如#list），减少重排压力 - 对图片加
data-src属性，首次进入视口后才赋值src并移除该属性，防止重复触发
CSS 与字体渲染的隐藏陷阱
传音部分机型对 font-display: swap 支持差，导致自定义字体加载期间文字长时间空白；同时 vh 单位在软键盘弹出时未重算，造成布局塌陷。
- 禁用
font-display: swap，改用optional或回退到系统字体栈（如system-ui, -apple-system, sans-serif） - 避免纯
100vh布局，改用min-height: 100vh+height: auto组合 - 慎用
will-change: transform，传音低配机型易触发渲染白块或闪烁
传音机型适配的核心不是“加 polyfill”，而是主动规避不可靠 API，并建立分层降级路径——从 localStorage 写入、滚动监听到字体加载，每个环节都要有明确的失败捕获和替代逻辑。最易被忽略的是：不验证就假设 sessionStorage 可用，实际上部分 Itel 设备连它也受限；务必在真机上用远程调试（Chrome DevTools → Remote Devices）确认行为，模拟器完全不可信。
