HTML5页面在智能电视浏览器运行失败主因是布局、交互、性能和加载未适配电视端特性——内核老旧、无鼠标、内存受限、帧率低；需组合检测UA、手动接管焦点、固定像素+viewport强制缩放、降级API并分包加载。
HTML5 页面在智能电视浏览器上跑不起来，通常不是因为语法错误，而是布局、交互、性能和加载机制这四块没对齐电视端特性——多数电视浏览器内核老旧（如 WebKit 537.x、Blink 68 以下）、无鼠标、无滚动条、内存受限、渲染帧率低，直接照搬 PC 或手机页面必然卡顿、失焦、文字糊、按钮点不中。
电视浏览器的 UA 和兼容性怎么判断
不能依赖 navigator.userAgent 里带 “TV” 就认为能用新 API。很多厂商（如海信 VIDAA、TCL WebOS、小米 PatchWall）会伪造 UA 或屏蔽关键字段。更可靠的方式是组合检测：
- 检查
screen.width和screen.height是否 ≥ 1920×1080，且window.devicePixelRatio多为 1（极少做 DPR 缩放） - 执行
'ontouchstart' in window && !('onwheel' in document)判断是否只有遥控器方向键导航（无滚轮、无触摸） - 用
try/catch测试requestIdleCallback是否可用——老内核基本不支持，需降级为setTimeout节流 - 避免使用
IntersectionObserver，部分电视浏览器触发不及时或根本不触发，改用定时轮询getBoundingClientRect()
遥控器焦点管理必须手动接管
电视浏览器默认焦点逻辑极不可靠：自动跳转错乱、tabindex 失效、:focus-visible 不触发。必须用 JS 全链路控制：
- 所有可操作元素（
button、a、input）显式设tabindex="0"，禁用tabindex="-1"以外的负值 - 监听
keydown事件，捕获ArrowUp/ArrowDown/ArrowLeft/ArrowRight和Enter，调用element.focus()手动跳转 - 用
document.activeElement+offsetParent做可视区域校验，焦点移出视口时主动scrollIntoView({ block: 'center' }) - 禁止使用
autofocus——电视端页面加载完成时间波动大，容易聚焦到半路消失的 DOM 上
CSS 大屏适配的关键参数不是 rem 或 vw
rem 依赖根字体大小，vw/vh 在部分电视浏览器中计算异常（比如把 100vw 算成 1280px 即使物理分辨率为 3840×2160）。真正稳定的是固定像素断点 + 强制缩放：
立即学习“前端免费学习笔记（深入）”；
- 在
中强制设置 viewport：（不要写device-width） - 所有尺寸单位统一用
px，字号起步 32px（小字在 3 米外根本看不清），按钮最小点击区 200×120px - 用
@media (min-width: 1920px)包裹大屏样式，但别嵌套太深——老内核对嵌套媒体查询解析失败率高 - 禁用
transform: scale()做整体缩放，会导致焦点框错位、Canvas 渲染模糊；改用 CSSzoom: 1.5（WebKit 支持良好，且不影响 focus outline）
资源加载和首屏性能的硬约束
电视内存常为 1–2GB，Chrome 内核版本可能卡在 68–73，V8 引擎不支持 class static fields、optional chaining 等语法。构建时必须切一刀：
- Webpack/Babel 目标设为
chrome 68，禁用async/await（转为Promise链），fetch必须配abortSignal超时兜底（电视网络抖动常见） - 图片全走
srcset，提供 1x/2x 两档，格式优先webp（VIDAA 支持，TCL 部分型号不支持 avif） - JS 拆成三个包：
vendors.js（React/Vue 运行时）、app.js（业务逻辑）、lazy.js（非首屏模块），用import()动态加载，且加timeout防止卡死 - 首屏 HTML 必须内联关键 CSS（ ——有些电视浏览器会阻塞渲染直到 CSS 加载完，而 DNS 解析可能长达 3 秒
最易被忽略的一点：电视没有“刷新”概念。用户长按遥控器返回键退出应用后，再次进入大概率是 resume 而非 reload，localStorage 和 DOM 状态 会残留。所有初始化逻辑得包裹在 pageshow 事件里，并检查 event.persisted 做状态重置。
