Android TV WebView如何实现网页原生1080P分辨率显示？

一、Android端原生配置（最优方案，无需修改前端代码） #

• 调整WebView基础配置，让WebView支持viewport规则，优先读取前端定义的视口参数：

WebSettings webSettings = webView.getSettings();
// 启用对viewport元标签的支持
webSettings.setUseWideViewPort(true);
// 自适应屏幕宽度加载内容
webSettings.setLoadWithOverviewMode(true);
// 禁用手动缩放
webSettings.setBuiltInZoomControls(false);
webSettings.setDisplayZoomControls(false);
// 开启硬件加速提升渲染清晰度
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

• 强制WebView使用物理像素作为渲染基准：如果是Android 7.0及以上系统，可以通过设置WebView的密度来覆盖系统默认的dp转换规则，直接匹配1080P物理分辨率。

二、前端侧适配方案（无法修改Android端代码时使用） #

• 方案1：修改viewport元标签（优先选择，对echarts无副作用） #

在页面<head>中插入如下meta标签，直接定义视口宽度为1920px，缩放比例适配设备density：

<meta name="viewport" content="width=1920, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

该方案为标准视口配置，不会修改JS读取的DOM尺寸参数，echarts内部坐标计算完全不受影响，渲染后自动适配物理1080P分辨率。

• 方案2：使用CSS transform缩放替代zoom #

zoom为非标准属性，会修改DOM布局尺寸的JS返回值，导致echarts坐标计算错位。改用transform渲染层缩放，不会影响内部JS逻辑：

html, body {
  width: 1920px;
  height: 1080px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  transform: scale(0.5);
  transform-origin: left top;
}

• 方案3：全局单位转换 #

如果需要适配更多不同分辨率设备，可以使用构建工具自动替换px单位：

• 用postcss-px-to-viewport插件，将所有px单位按1920px设计稿自动转换为vw单位
• 或用postcss-pxtorem配合根节点font-size设置，实现全局比例缩放，无需手动修改每个px数值

补充说明 #

body{zoom:0.5}对echarts无效的核心原因是：zoom会改变DOM元素clientWidth/clientHeight等属性的JS返回值，和实际渲染的物理尺寸产生偏移，echarts基于读取到的DOM尺寸计算canvas绘制坐标，就会出现错位、模糊、点击区域偏移等问题，优先使用viewport或transform缩放可完全规避该问题。

内容的提问来源于stack exchange，提问作者lathesky