Question

What combination of META tag settings in HTML and WebSettings in Java should I use to get the following result: window.innerWidth in Javascript should be always (in any Android version and on any device) equal to the WebView width in pixels.

For instance, I set the WebView width to 1024px. In Android AVD emulator, window.innerWidth is equal to 683px (2/3 of 1024, or 150% scale).

I tried the following META:

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

— doesn’t work.

Then I tried:

_WebView.getSettings().setLoadWithOverviewMode(true);
_WebView.getSettings().setUseWideViewPort(true);
_WebView.setInitialScale(100);

— doesn’t work too.

Finally,

_WebView.getSettings().setDefaultZoom(ZoomDensity.FAR);

seems to be working. According to documentation, it means “100% looking like in 240dpi”. I don’t know, what dpi users device has! How to get the task done correctly?

UPDATE

I’ve just tested ZoomDensity.FAR on a high-dpi tablet — it works without it and doesn’t work with it!

Regards,

Answer 1

1. META:

   meta name=”viewport” content=”width=device-width; user-scalable=no; initial-scale=1.0;
   minimum-scale=1.0; maximum-scale=1.0; target-densityDpi=device-dpi;”

2. Java:

   _WebView.getSettings().setLoadWithOverviewMode(true);
   _WebView.getSettings().setUseWideViewPort(true);

This combination works.