Android TV应用WebView分辨率过低问题的解决求助

我希望通过Chromecast with Google TV（4K）在办公室的4K电视上展示Grafana仪表盘网站，因此开发了一款极简Android TV应用（最低SDK：API 31），通过内置WebView加载该静态仪表盘。应用通过将APK上传至Google Drive，使用TV File Commander安装到Chromecast上。

启动应用后发现WebView分辨率很低，我让应用访问浏览器尺寸检测页面后，发现浏览器仅以540x960像素运行。请问该如何解决此问题？

activity_main.xml #

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_browse_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:deviceIds="tv"
    tools:ignore="MergeRootFrame" >
    <WebView
            android:layout_width="match_parent"
            android:layout_height="match_parent" android:id="@+id/webView"/>
</FrameLayout>

MainActivity.kt #

package com.company.browser

import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView
import androidx.fragment.app.FragmentActivity

class MainActivity : FragmentActivity() {

    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webView)
        val webSettings: WebSettings = webView.settings
        webSettings.domStorageEnabled = true
        webSettings.javaScriptEnabled = true

        webView.loadUrl("https://www.webfx.com/tools/whats-my-browser-size/")
    }
}

AndroidManifest.xml #

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >

    <uses-permission android:name="android.permission.INTERNET" />

    <uses-feature
        android:name="android.hardware.touchscreen"
        android:required="false" />
    <uses-feature
        android:name="android.software.leanback"
        android:required="true" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.Browser" >
        <activity
            android:name=".MainActivity"
            android:banner="@drawable/app_icon_your_company"
            android:exported="true"
            android:icon="@drawable/app_icon_your_company"
            android:label="@string/app_name"
            android:logo="@drawable/app_icon_your_company"
            android:screenOrientation="landscape" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

1. 配置WebView自适应参数 #

修改MainActivity中的WebSettings配置，添加以下代码让WebView适配4K屏幕：

webSettings.useWideViewPort = true // 支持宽视口，适配大屏幕
webSettings.loadWithOverviewMode = true // 加载页面时自动缩放以适配屏幕
webSettings.setSupportZoom(true)
webSettings.builtInZoomControls = false // 关闭TV不需要的缩放控件
webSettings.displayZoomControls = false
webSettings.textZoom = 100 // 确保文本缩放比例为100%
webView.setInitialScale(100) // 设置初始缩放为100%

2. 启用硬件加速 #

在AndroidManifest.xml的<activity>标签中添加硬件加速属性，提升WebView的渲染性能和分辨率支持：

<activity
    ...
    android:hardwareAccelerated="true" >
    ...
</activity>

3. 确保主题适配Android TV #

检查应用主题是否继承自Leanback主题，修改AndroidManifest.xml中的android:theme：

android:theme="@style/Theme.Leanback"

如果使用自定义主题，需在res/values/styles.xml中确保继承Leanback：

<style name="Theme.Browser" parent="Theme.Leanback">
    <!-- 自定义样式配置 -->
</style>

4. 优化布局适配 #

修改activity_main.xml，为父布局和WebView添加android:fitsSystemWindows="true"，避免系统栏占用屏幕空间：

<FrameLayout
    ...
    android:fitsSystemWindows="true" >
    <WebView
            ...
            android:fitsSystemWindows="true"/>
</FrameLayout>

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