The font size is different for ios and android
In a web browser on Android, I load an html file that contains an HTML5 canvas. When writing text to canvas, it is very small. If I load the same html file in my PC browser or even webview in IOS it looks correct. As far as I can tell, I've turned off scaling and the canvas fills the entire webview. I expect the font size to be the same as when loaded in other browsers. Any ideas?
In the header 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 loads, I dynamically adjust the canvas to fill the screen.
source to share
You set the density to 1.0 and tell the Android WebView not to scale anything at all when you declared your view screen that way. You can either remove this viewport declaration which will then scale the images as well as the fonts, or you can change the WebView text size settings based on the Android device the app is running on. I assume you want to do the latter.
You need to calculate the density of the device first. You can do it with this piece of code:
float density = getResources().getDisplayMetrics().density;
Then you can adjust the font size for the density.
If the density is 1.0, then the average density (mdpi),> = 1.5 - high density (hdpi) and> = 2.0 - ultra-high density (xhdpi).
If you are using ICS, it has a nice API for WebView:
webView.getSettings().setTextZoom(100 * density);
If you are using a pre-ICS device, you need to use the if / else statement to check the density above, 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 them in ICS / else pre-ICS by checking Build.VERSION.SDK_INT.
Here's some more reading about density: http://developer.android.com/guide/practices/screens_support.html
source to share