why does my font-size look so much larger in the android webview object than when viewed in the android browser?

Question

I am trying to make one of those tiny android apps that do nothing but display a website in a webview object rather than the browse and so far it loads the target webpage but the text and image sizes are all much larger than when the page is viewed in the actual device browser. In the browser the page looks right but not in my app.

Inspecting the page in my desktop chrome reveals the css is using font-size 6em if that helps you.

When I include a viewport meta tag it does not do anything for my app but causes the browser to render the page much closer to the way the webview object does: stuff looks too big.

Is there a quick fix ( eg a viewport tag setting or an api call on the webview object or the websettings object) or do I need to redesign the css, maybe to not use "em"s? BTW, I didn't write the web pages or the css.

Thanks.

PS: BTW, the page I am trying to hit is here: deltabingo.com/delta-bingo-mobile

Answer 1

The difference between the browser and your app is probably because you haven't set the setUseWideViewPort WebSetting to true.

If the page looks too big/too small then it's possible that the viewport isn't want you want it to be, try something like this (and maybe play around with the value width is set to):

<meta name="viewport" content="width=320, initial-scale=1">

It's also worth noting that the page is using target-densityDpi in the viewport, which is not supported by the KK webview.

See here for more info on viewport: https://developers.google.com/chrome/mobile/docs/webview/pixelperfect http://developer.android.com/guide/webapps/targeting.html