Html Question posted in
Some basic documentation can be found here.

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

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.

enter image description here

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

enter image description here

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.

enter image description here

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    Capacitor 6 will add a setting for allowing apps to be zoomed, see
    https://github.com/ionic-team/capacitor/pull/7000

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search