Modifying Android WebView text for different screens and os version

Question

Good morning, I have an application designed to work on both a smartphone and a tablet. When it runs on the tablet, I want to enlarge the text of my web view so that users can read the text better and fill in all the empty space, if possible.

This code that I use to do this trick:

//Webview Zoom if( UIUtils.isTablet(getActivity())) { if(UIUtils.isICS()) { webView.getSettings().setTextZoom(130); } else { int currentTextSizeIndex = lyricsView.getSettings().getTextSize().ordinal(); if ( currentTextSizeIndex+1 < lyricsView.getSettings().getTextSize().values().length ) webView.getSettings().setTextSize( lyricsView.getSettings().getTextSize().values()[currentTextSizeIndex+1] ); } } 

So, I check if I am on the tablet, and I check which user version of the OS. Infact from API Level 14 I can use setTextZoom , which allows me to set the text scaling of the page as a percentage (default is 100). This solution is much more scalable, because I can, for example, give the user the opportunity to increase or decrease the text as necessary in increments of +10 or -10 percent.

Until API level 14, I have to use setTextSize , which use the enum parameter as the parameter (default is NORMAL). TextSize - Enum to indicate the size of the text. SMALLEST - 50%. SMALLER - 75%. NORMAL - 100% LARGER - 150%. LARGEST - 200%.

Thus, I can use only these 5 costants and not so scalable (but this is the only way to transfer this function to 90% of phones that do not have ICS: D).

The problem is that webView.getSettings().setTextSize(TextSize.LARGER); acts differently when I show a text view in different tables, and this is really not normal.

At the moment I am testing Samsung Galaxy Tab and Kindle Fire. These are the technical specifications of GSMArena:

Samsung Galaxy Tab P1000

Screen
Type TFT capacitive touchscreen, 16M colors

Size 600 x 1024 pixels, 7.0 inches (~ 170 pixels per pixel)

Amazon Kindle Fire

Screen
IPS Type TFT capacitive touchscreen, 16M colors

Size 1024 x 600 pixels, 7.0 inches (~ 170 pixels per pixel)

As you can see, they have the same resolutions, inches and ppi! Now I will show you 2 screenshots (of the same web content content) that form these devices, so you can opt out of what I'm talking about.

KindleFire:

Galaxy Tab:

On the Galaxy tab with textSize LARGE, the text is too big, and this is visible. Thus, for such a device it is better to show the default default text (and let the user choose if you place more of it). But how can I find out what textSize looks best by default? Since NORMAL is suitable for the Galaxy Tab and too small for the Kindle Fire, and LARGE is too large for the galaxy tab, but ideal for the Kindle. I do the test only on these two devices, but I have to support all the tablets, I have to find some parameters, differencs in the devices, to say: ok on this device, because the permissions are small. I put more / normal, instead, on this, because it is a big resulation, I can put it more (sort of).

Have you ever encountered this problem? How can I solve it?

Answer 1

We saw similar problems in our application (in general, not only in WebViews).

The original Samsung Galaxy tab incorrectly reports itself as a big hdpi. Other tablets with the same screen size (7 inches) and resolution (1024x600) correctly report themselves as large mdpi. These “right” tablets include the Kindle Fire, Nook Tablet, and even the Samsung Galaxy Tab 2! I would expect HTC Flyer to do the same, but have not tried.

In one blog post, Google claimed it was Samsung's design solution:

http://android-developers.blogspot.co.uk/2010/09/screen-geometry-fun.html (search for "surprise")

In another, they claimed that it was a mistake:

http://android-developers.blogspot.co.uk/2011/07/new-tools-for-managing-screen-sizes.html (search for "interesting").

In any case, the original Galaxy tab is an exception, and this should not be repeated.

I recommend going with what looks better on Fire, as this should work well for all 7-inch tablets except the original Galaxy Tab. If you can make it look acceptable, then this is a good bonus.

Hope this helps!

Answer 2

Take a look at this: Web application targeting screens , the viewport should help you

Answer 3

Is this your or any other content that you display? This may not be entirely relevant, but if it is yours, you can control the appearance of the material in webview using CSS3, but again I do not know what CSS3 support exists on your target devices.