Приложение CapacitorJS с Android Webview: отключить масштабирование

avatar
basti500
1 июля 2021 в 20:40
529
1
2

У меня есть веб-приложение для ТВ (на основе Vue).

Мое приложение оптимизировано для FullHD 1920x1080. Теперь я хочу перенести его на Android TV.

В браузере и на TizenTV работает и выглядит нормально: enter image description here

index.html область просмотра:

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

Теперь я перенес его на AndroidTV с помощью Capacitor JS. Там в Симуляторе ТВ он слишком большой enter image description here

Я знаю, что есть метод setUseWideViewPort для WebView, который может помочь. Но я не знаю, как добавить этот код в приложение Capacitor для Android.

Для тестирования я попытался отредактировать файл activity_main.xml (src/main/res/layout/activity_main.xml), но даже удаление WebView внутри этого файла и замена его фиктивной кнопкой ничего не меняет в выводе.

Итак, где я могу изменить код, чтобы приложение правильно масштабировалось?

Источник

Ответы (1)

avatar
basti500
11 июля 2021 в 17:12
0

Итак, прежде всего конденсатор игнорирует все, что вы изменяете в файле activity_main.xml.

В итоге я написал собственное веб-представление.

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

}