Question

In a webview on Android, I load an html file that contains an HTML5 canvas. When writing text to the canvas, it is extremely small. If I load the same html file in a PC browser or even a web view on IOS, it looks correct. As far as I can tell, I have disabled zooming, and the canvas is filling the entire web view. I would expect the font size to be the same as when loaded in other browsers. Any ideas?

In the head of the html file, the viewport is declared as:

<meta name='viewport' content='target-densitydpi=device-dpi,initial-scale=1.0,user-scalable=no'/>

in the body of the html file, the canvas is declared as:

<canvas id='rtmc_canvas' style='position:relative; left:0px; top:0px;'/>

after the page is loaded, I dynamically adjust the canvas to fill the screen.

Answer 1

You set the density to 1.0 and tell Android’s WebView not to scale anything at all when you declared your viewport in that specific way. You can either remove that viewport declaration, which will then cause images to be scaled as well as fonts or you can modify the text size settings of the WebView based on the Android device that the user is running your application on. I’ll assume you want to do the latter.

You’ll need to first calculate the density of the device. You can do that with this piece of code:

float density = getResources().getDisplayMetrics().density;

Then you can adjust the font size for the density.

If density is 1.0, then it is medium density (mdpi), >= 1.5 is high density (hdpi) and >= 2.0 is extra high density (xhdpi).

If you are using ICS, then it has a nice API for WebView:

webView.getSettings().setTextZoom(100 * density);

If you are using a pre-ICS device, then you have to use an if/else statement to check for the densities above and then use:

if (density < 1.5) {
    // mdpi:
    webView.getSettings().setTextSize(WebSettings.TextSize.NORMAL);
} else if ((density >= 1.5) && (density < 2.0)) {
    // hdpi:
    webView.getSettings().setTextSize(WebSettings.TextSize.LARGER);
} else {
    // xhdpi:
    webView.getSettings().setTextSize(WebSettings.TextSize.LARGEST);
}

Or better yet, you can wrap both of those in an if ICS/else pre-ICS by checking Build.VERSION.SDK_INT.

Here is some further reading about density: http://developer.android.com/guide/practices/screens_support.html