Android WebView text zoom for different screens an

Good morning guys, I've an app that is designed to work both on smartphone and tablet. When it runs on tablet I want to zoom the text of my webview to allow users to read better the text and to fill all the empty space if it's possible.

This the code that I'm using to do that 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'm on a tablet and I check which OS version user is using. Infact from API Level 14 I can use setTextZoom that allow me to set the text zoom of the page in percent (default 100). This solution is much much more scalable becaue I can for example give to the user the ability to increase or decrease the text as they want with +10 or -10 percent of step.

Before API Level 14 I have to use setTextSize that use an enum as parameter (default NORMAL). TextSize is Enum for specifying the text size. SMALLEST is 50% SMALLER is 75% NORMAL is 100% LARGER is 150% LARGEST is 200%

So I can use only these 5 costants and it's not so scalable (but it's the only way to give this feature to the 90% of the phones that don't have ICS :D).

The problem is that webView.getSettings().setTextSize(TextSize.LARGER); acts in different ways when I show the text view in different tablets and it's really not ok.

At the moment I'm testing on a Samsung Galaxy Tab and a Kindle Fire. These are the tech specifications from GSMArena:

Samsung P1000 Galaxy Tab

Display
Type TFT capacitive touchscreen, 16M colors

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

Amazon Kindle Fire

Display
Type IPS TFT capacitive touchscreen, 16M colors

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

As you can see they have the same resolutions, inches and ppi! Now I'll show you 2 screenshots (of the same webview content) form those devices so you undersand what I'm talking about.

KindleFire:

Galaxy Tab:

On the Galaxy Tab with the textSize LARGE the text is too much big and it's ulgy to see. So for that kind of the device is better to show a NORMAL text by default (and let the user choise if put it bigger). But how can I know which is the best looking default textSize to show? Because NORMAL is ok for Galaxy Tab and too small for Kindle Fire and LARGE is too big for galaxy tab but perfect for Kindle. I'm doing a test only on these 2 devices but I've to support all tablets I've to find some kind of parameters, differencs in devices in order to say: ok on this device because resolutions is small I'll put bigger/normal, instead on this one because it's bigger resulution I can put it bigger (kind of).

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

回答1:

We've seen similar issues to this in our app (in general, not just in WebViews).

The original Samsung Galaxy Tab incorrectly reports itself as large-hdpi. Other tablets with the same screen size (7 inches) and resolution (1024x600) correctly report themselves as large-mdpi. These "correct" tablets include the Kindle Fire, Nook Tablet, and even the Samsung Galaxy Tab 2! I would expect the HTC Flyer to do the same but haven't tried it.

In one blog post Google claimed this was a design decision made by Samsung:

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

In another, they claimed it was a mistake:

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

Either way, the original Galaxy Tab is an exception, and this shouldn't be allowed to happen again.

I recommend going with whatever looks best on the Fire as that should work well for all 7 inch tablets except the original Galaxy Tab. If you can make it look acceptable on there too, then it's a nice bonus.

Hope that helps!

回答2:

Look at this : Targeting Screens from Web Apps, the viewport should help you

回答3:

Is it yours or somebody else's content you're showing? It may be not completely relevant but if it's yours, you can control the appearance of stuff in webview with CSS3, but again I don't know what support of CSS3 is there on your target devices.