CapacitorJS App with Android Webview: Disable zoom

Question

I have a TV WebApp (based on Vue).

My App is optimized for FullHD 1920x1080. Now I want to migrate it to Android TV.

In the browser and on TizenTV it works and looks fine:

index.html viewport:

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

Now I migrated it to AndroidTV with Capacitor JS. There in the TV Simulator, it is too large

I know that there is a method setUseWideViewPort for the WebView which might help. But I don't know how I can add this code to the Capacitor Android App.

For testing, I tried to edit the activity_main.xml (src/main/res/layout/activity_main.xml) but even deleting the WebView inside that file and replacing it with a dummy button does not change anything in the output.

So where can I modify the code to make my application scale correctly?

Answer 1

So first of all capacitor ignores everything you change within activity_main.xml.

I ended up writing my own web view.

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();
    }
}

and now I can use it within 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()));
    }

}