Why is the font size much larger in an Android web browser object than when viewed in an Android browser?

Question

I am trying to make one of these tiny Android apps that do nothing but display a website in a webview object rather than view, and while it loads the target web page, but the text and image sizes are much larger than when the page is being viewed in a real device browser. The page looks correct in the browser, but not in my application.

Checking the page on my Chrome desktop shows that css uses a 6em font size if that helps you.

When I include the viewport meta tag, it does nothing for my application, but it makes the browser render the page much closer to how the webview object does: things look too big.

Is there a quick fix (for example, setting a viewport tag or calling api in a webview object or a websettings object) or do I need to reverse engineer css, maybe not use "em"? By the way, I did not write web pages or css.

Thanks.

PS: BTW, the page I'm trying to get to is here: deltabingo.com/delta-bingo-mobile

Answer 1

The difference between the browser and your application is probably due to the fact that you did not set setUseWideViewPort WebSetting to true.

If the page looks too large / too small, it is possible that the viewport doesn’t want you to want it, try something like this (and maybe play around with the width value):

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

It is also worth noting that the page uses target-densityDpi in the viewer, which is not supported by KK webview .

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