Capacitor on Android Unable to "scale down" page using viewport

Question

Capacitor on Android Unable to "scale down" page using viewport

84 views Asked by mikeysee At 23 January 2024 at 02:35

If you create a basic HTML page with any content on it and add this to the :

<meta name="viewport" content="user-scalable=no, width=500px, initial-scale=0.1, minimum-scale=0.1, maximum-scale=10" />

Then open this in chrome on your PC or on your android phone you will see the content scaled down as you would expect.

Now do the same in a Capacitor app and see the content it isnt scaled down.

Why is this? Why does scaling work on android in the browser but NOT in capacitor's WebView?

Note; it is possible to set initial-scale to a larger value 2 for example, this works both browser AND Capacitor which is really strange.

Just for completeness this is the entire HTML I am using for the above images:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <base href="/" />
    <meta name="viewport" content="user-scalable=no, width=500px, initial-scale=0.3, minimum-scale=0.1, maximum-scale=10" />
  </head>
  <body>
    <div style="width: 500px; background: red">500px wide</div>
    <div style="width: 100dvw; background: purple">100dvw</div>
    <div style="width: 200px; background: green">200px wide</div>
    <div style="width: 100px; background: blue">100px wide</div>
    <div style="font-size: 10em">HELLO WORLD THIS IS SOME TEXT!</div>
  </body>
</html>

Original Q&A

There are 1 answers

**mikeysee** · Answer 1 · 2024-01-23T03:04:14+00:00

Typical! As soon as I post this question I stumble across the answer (with some help from ChatGPT)

You have to set these two to true on the WebView on the Java side:

    webSettings.setUseWideViewPort(true);
    webSettings.setLoadWithOverviewMode(true);

The full code (minus the package line) for my MainActivity.java looks like:

import com.getcapacitor.BridgeActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends BridgeActivity {

 @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Grab WebView
    WebView webView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = webView.getSettings();

    // The Magic
    webSettings.setUseWideViewPort(true);
    webSettings.setLoadWithOverviewMode(true);
  }
}

For this to work you have to give your WebView and id. Edit activity_main.xml so that the WebView tag looks like this:

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

And now it works! You can scale down and up!

TechQA.

Capacitor on Android Unable to "scale down" page using viewport

There are 1 answers

Related Questions in ANDROID

Related Questions in HTML

Related Questions in VIEWPORT

Popular Questions

Popular Tags

Trending Questions