Android WebView seems to ignore “viewport” information on web pages

Question

I have a website that is using the viewport META tag to tell mobile browsers how to display content ( ). Viewing the page in the Android browser looks correct (and iPhone,

Answer 1

Use this:

 <meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=low-dpi" />

Now Android WebView and the Browser adheres to the viewport settings.

Phew, this took a lot of tweaking to get right. Jeez.

Answer 2

As the docs say in the link in the best answer, you can specify using a meta tag how the device should react to the size of your web app compared to the screen. The following tag made an Android phone respect the viewport size of my web app:

<meta name="viewport" content="target-densitydpi=high-dpi" />

Answer 3

The only thing that worked for me was

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no" />

but specifically adding maximum-scale=1.0, minimum-scale=1.0 to the already existing tag helped. For my specific case I didn't want to give the user the ability to zoom in/out so YMMV.

Answer 4

Another fail in the implementation on some Android Phones ist the fact, that for example the HTC Desire HD will ignore the viewport TAG - user-scale=no completly.

Answer 5

Link in the accepted answer and this will help to understand viewport on Android.

In my scenario, fixed width is used, the solution is:

settings.setUseWideViewPort(true)
settings.setLoadWithOverviewMode(true)

Answer 6

After lot's of experimentation I've determined that the Android WebView won't obey the 'viewport' setting if the actual page forces a width wider than the viewport setting.

For example, I was setting a viewport of 500px, but had an element on my page that forced a 960px width. The viewport wasn't obeyed because the WebView refused to hide that extra content.

This seems obvious when I'm typing it, but I must have spent days working on the problem.