10

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, etc).

When I load the page into a WebView component in an android Application, the WebView ignores the "VIEWPORT" tag, and renders the page at "full" resolution, which is zoomed-in in this case.

Evan
  • 3,141
  • 4
  • 28
  • 25

8 Answers8

22

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.

stickwithjosh
  • 144
  • 3
  • 9
  • This is very interesting. Surely the viewport meta directive should take effect *before* the initial page render is computed? – Barney Nov 27 '12 at 16:10
9

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" />
jorisw
  • 778
  • 1
  • 10
  • 16
9

Try using this method of WebSetting class

setUseWideViewPort (boolean use)

I use this to tell Android webview to consider my "viewport" tag

onmyway133
  • 42,755
  • 26
  • 247
  • 253
  • +1 this is important - from the docs _"Gets whether the WebView supports the "viewport" HTML meta tag or will use a wide viewport."_ – Dori May 28 '14 at 14:40
  • It works to me. However I found that even it's set to false, the viewport tag is still processed, 'cause when I change it to `value="width=100%"` the HTML is also shown correctly. – Evi Song Nov 27 '15 at 07:04
2

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)
Lym Zoy
  • 931
  • 10
  • 15
1

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.

Voss
  • 11
  • 1
  • I'm getting the same result with my HTC Incredible S. Tried every single trick in the book and it won't budge: the viewport tag is completely ignored. – aeldron Sep 28 '12 at 15:06
  • It's called `user-scalable` not `user-scale`, as far as I know. – Thomas Jul 12 '19 at 10:39
0

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.

skidadon
  • 547
  • 4
  • 7
0

I can only confirm your issue. There is an open issue at the android issue tracker. Please give it a vote/star if you're affected by this.

Jonas Äppelgran
  • 2,504
  • 22
  • 25
0

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.

Adam Johns
  • 33,899
  • 24
  • 113
  • 169