font size different on ios and android

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 br

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