android - 为什么 Android TV 应用程序的 Web View 分辨率较低

Question

我有一个仪表板网站 (Grafana)，我想使用 Chromecast 和 Google TV (4K) 在办公室的 4K 电视上展示该网站。我正在尝试创建一个非常小的 Android TV 应用程序(最低 SDK:API 31)，并带有显示此静态仪表板的嵌入式 Web 浏览器。通过将 APK 上传到我的 Google 云端硬盘并使用 TV File Commander 进行安装，即可将该应用程序安装到 Chromecast 上。

当我在 Chromecast 上启动应用程序时， WebView 以低分辨率运行。我已更改应用程序以访问此网站 - 浏览器似乎仅以 540x960 像素运行: https://www.webfx.com/tools/whats-my-browser-size/

我该如何解决这个问题？

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>

主要 Activity

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>

Answer 1

Android TV 上的 WebView 非常令人沮丧(至少对我来说)。希望这可以帮助您了解根本原因和解决方法。

540x960 分辨率从何而来？

WebFx 浏览器大小工具向您显示 CSS 像素。这些是合乎逻辑的，并以某种方式映射到物理屏幕像素上，以考虑 dpi。我见过的大多数 Android TV 适配器都具有 window.devicePixelRatio == 4。如果您可以访问 JS 控制台，您可以轻松检查它。

这意味着每个逻辑像素有 4 个物理像素。

4K 为 3840x2160

4K/4 正好是 540x960

devicePixelRatio 从何而来，为什么是 4？

WebView 的

devicePixelRatio 的计算方式与 Android UI 中的密度无关像素相同。

1:1密度是160，其他密度桶是它的倍数或分数。

您可以使用以下 adb 命令检查设备的密度:

$ adb shell wm density
Physical density: 640

上面的值 (640) 来 self 的 Chromecast。现在按照上图的指导，其密度为 640 = 160 * 4 或 4 倍 1:1。由 Chrome 支持的 WebView 会执行此数学运算，并将 window.devicePixelRatio 设置为 4。除非您从头开始修补和构建 chromium，否则无法访问该代码。

顺便说一下，Android 4K TV 模拟器上的密度是相同的 (640)。您可以使用它进行调试和实验。

640的密度从何而来？它是由设备开发人员在构 build 备固件时设置的。

如何处理所有这些密度问题？

这是我想到的三个基本选项，但这并不是一个详尽的列表，只是为了将您推向正确的方向。

调整网页

您可以使用 -webkit-device-pixel-ratio 完全调整页面的 CSS 以考虑屏幕密度

#header {
    /* dimensions */
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        /* overridden dimensions or scale value etc. */
    }
}

更多详细信息请参见此处: https://developer.android.com/develop/ui/views/layout/webapps/targeting#DensityCSS

调整设备的密度设置

这会影响每个应用的 UI 并增加 GPU 的负载，但仍然是一个有效的选项。

$ adb shell wm density ${YOUR_DENSITY_VALUE}

破解页面缩放并将其注入(inject)到加载的页面中

非常hacky，但是有效。

webView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        view?.loadUrl("javascript:document.body.style.zoom = 1/window.devicePixelRatio;")
        super.onPageFinished(view, url)
    }
}