具有 Android Webview 的 CapacitorJS 应用程序：禁用缩放

Question

我有一个 TV WebApp（基于 Vue）。

我的应用程序针对 FullHD 1920x1080 进行了优化。现在我想将它迁移到 Android 电视。

在浏览器和 TizenTV 上它工作正常并且看起来不错：

index.html 视口：

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

现在我用 Capacitor JS 将它迁移到 AndroidTV。电视模拟器里面太大了

我知道 WebView 有一个方法 setUseWideViewPort 可能会有所帮助。但我不知道如何将这段代码添加到 Capacitor Android App.

为了测试，我尝试编辑 activity_main.xml (src/main/res/layout/activity_main.xml) 但即使删除该文件中的 WebView 并将其替换为虚拟按钮也不会改变任何内容在输出中。

那么我在哪里可以修改代码以使我的应用程序正确缩放？

Answer 1

所以首先电容器会忽略您在 activity_main.xml 内更改的所有内容。

我最终编写了自己的 Web 视图。

android/app/src/main/java/tvvuetestapp/com/WebViewClient.java

package tvvuetestapp.com;

import android.graphics.Bitmap;
import android.net.Uri;
import android.view.View;
import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebView;

import com.getcapacitor.Bridge;

public class WebViewClient extends android.webkit.WebViewClient {

    private Bridge bridge;

    public WebViewClient(Bridge bridge) {
        this.bridge = bridge;
    }

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        return bridge.getLocalServer().shouldInterceptRequest(request);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        Uri url = request.getUrl();
        return bridge.launchIntent(url);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return bridge.launchIntent(Uri.parse(url));
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // This setting is changing the zoom level
        view.loadUrl("javascript:document.body.style.zoom = "+ String.valueOf(getScale(view))+";");

    }

    private double getScale(View view) {
        return (view.getHeight() / (double) view.getWidth());
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        bridge.reset();
    }
}

现在我可以在 MainActivity.java

中使用它

android/app/src/main/java/tvvuetestapp/com/MainActivity.java

package tvvuetestapp.com;

import android.webkit.WebSettings;
import android.webkit.WebView;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {

    @Override
    public void onResume() {
        super.onResume();
        WebView webView = getBridge().getWebView();
        webView.setWebViewClient(new WebViewClient(getBridge()));
    }

}

具有 Android Webview 的 CapacitorJS 应用程序：禁用缩放

CapacitorJS App with Android Webview: Disable zoom

android

android-webview

android-studio

vue.js

capacitor