Android TV WebView应用缩放因子问题：Capacitor+Vue适配求助

你遇到的是Android系统基于设备DPI自动缩放WebView内容的问题，电视设备通常被识别为高DPI（2x）设备，导致WebView将1920px的物理像素映射为960px的逻辑像素。可以通过以下几种方式修改该行为：

一、调整Android项目的WebView配置 #

1. 打开Capacitor生成的Android项目，找到app/src/main/AndroidManifest.xml
   • 在对应Activity（一般是MainActivity）的标签内添加横屏锁定和配置变更参数，避免屏幕旋转影响：

     android:screenOrientation="landscape"
     android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|uiMode"
     

2. 修改Activity代码，强制WebView按1:1比例渲染：
   • 如果是Java项目，打开MainActivity.java，重写onCreate方法：

     import android.os.Bundle;
     import android.webkit.WebSettings;
     import com.getcapacitor.BridgeActivity;
     
     public class MainActivity extends BridgeActivity {
         @Override
         protected void onCreate(Bundle savedInstanceState) {
             super.onCreate(savedInstanceState);
             WebSettings webSettings = getBridge().getWebView().getSettings();
             // 禁用缩放功能
             webSettings.setSupportZoom(false);
             webSettings.setBuiltInZoomControls(false);
             webSettings.setDisplayZoomControls(false);
             // 强制按100%比例加载
             getBridge().getWebView().setInitialScale(100);
             // 适配宽视口，按物理屏幕尺寸加载内容
             webSettings.setUseWideViewPort(true);
             webSettings.setLoadWithOverviewMode(true);
         }
     }
     

二、配置Capacitor全局参数 #

在项目根目录的capacitor.config.json中添加WebView相关配置，让Capacitor打包时自动应用设置：

{
  "android": {
    "webView": {
      "initialScale": 100,
      "useWideViewPort": true,
      "loadWithOverviewMode": true
    }
  }
}

三、修改Vue项目的Viewport设置 #

在public/index.html中调整meta标签，强制锁定视口宽度为2K分辨率，禁止缩放：

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

以上三种方式结合使用，就能让应用在2K电视设备上以1920px的原生宽度渲染，不再出现自动缩放至960px的情况。

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