TV浏览器HTML5缩放失真怎么解决

TV浏览器（如Tizen、WebOS、Android TV）因viewport激进缩放、devicePixelRatio伪造成固定值且不支持pixelated渲染，导致文字模糊、Canvas失真、视频拉伸等严重显示问题；解决核心在于放弃通用响应式思路，转为系统级精准适配：写死viewport宽度为1920，用screen.width动态计算rem基准并立即注入根字体，禁用initial-scale和vw，Canvas需手动同步DPR与宽高属性，video必须用固定width/height属性而非CSS控制，并通过UA或系统API识别具体TV平台进行最小化定制——细节校准，才是填满4K大屏、守住像素清晰度的最后一道防线。

viewport 缩放导致像素模糊

TV 浏览器（尤其是 WebKit 内核的 Tizen、WebOS、Android TV）对 viewport 的缩放处理很“激进”——它会把整个页面按比例拉伸渲染，而不是重排布局。结果就是文字发虚、按钮边缘锯齿、Canvas 图形糊成一片。

• 典型现象：font-size: 16px 在 4K 屏上看着像 8px 那么细，但实际 DOM 尺寸没变，只是被 GPU 拉伸采样了
• 根本原因：TV 系统常将 devicePixelRatio 伪造成 1.0 或 2.0，而浏览器又不支持 image-rendering: pixelated 这类控制缩放算法的 CSS 属性
• 别用 initial-scale + width=device-width 组合，TV 上 device-width 常返回错误值（比如 1920 被识别为 960）
• 推荐写死 viewport 宽度：例如针对主流智能电视，统一设为 width=1920，再配合 CSS rem 动态适配

rem 基准未随 TV 分辨率动态调整

移动端用 document.documentElement.style.fontSize = '100px' 配合 1920px 设计稿很常见，但在 TV 上失效——因为 TV 浏览器不触发 resize 事件，也不响应 orientationchange，甚至部分机型连 matchMedia 都不准。

• 必须在页面加载完成时立即计算一次：读取 screen.width（不是 window.innerWidth），再按比例设置根字体
• 避免用 vw 单位：Tizen 5.5+ 支持，但 WebOS 4.0 及更早版本会把 100vw 当作物理像素而非逻辑视口宽，导致布局溢出
• 实操建议：

const baseWidth = 1920;
const scale = screen.width / baseWidth;
document.documentElement.style.fontSize = (100 * scale) + 'px';

注意：该代码需放在 中的