Sunday, 4 July 2021

CapacitorJS App with Android Webview: Disable zoom

I have a TV WebApp (based on Vue).

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

In the browser and on TizenTV it works and looks fine: enter image description here

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 enter image description here

I know that there is a method setUseWideViewPort for the WebView which might could 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.

How to reproduce

  1. Check out https://github.com/bastiW/tv-vue-test-app
  2. yarn to install dependencies
  3. yarn dev and change to full HD in the chrome browser to verify that it is working
  4. yarn build to build the project to dist
  5. npx cap sync to synchronise the build with android
  6. npx cap open android to open it in android studio and to run it

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



from CapacitorJS App with Android Webview: Disable zoom

No comments:

Post a Comment