1

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: Kindle Fire Webview with webView.getSettings().setTextSize(TextSize.LARGER)

Galaxy Tab: Samsung Galaxy Tab Webview with webView.getSettings().setTextSize(TextSize.LARGER)

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?

StErMi
  • 5,389
  • 5
  • 48
  • 71

3 Answers3

5

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!

danwilkie
  • 794
  • 6
  • 10
0

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

Carbodrache
  • 261
  • 2
  • 3
  • 10
0

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.

durilka
  • 1,399
  • 1
  • 10
  • 22
  • Content is mine yes, but my range of devices is very big. All devices from Android 2.1 (smartphone, tablet, tv, and so on). I don't want to control with CSS3 because as I said I want to give to the user the ability to increase / decrese the size of the font. What I'm trying to find is the best default value for that text size – StErMi Apr 02 '12 at 21:36
  • i don't see why increasing/decreasing font size is impossible with css but you know better ;) – durilka Apr 02 '12 at 21:54
  • Nope I wasn't saying that. I think that if I find a native code answer it will be better rather than manipulating css with js – StErMi Apr 03 '12 at 07:47
  • No you don't manipulate css with JS. That's the point of CSS3, see "css3 media queries" for instance http://webdesignerwall.com/tutorials/css3-media-queries. Basically the idea is to specify different styles for different situations like screen sizes or what gives. – durilka Apr 04 '12 at 23:38
  • is CSS3 supported by all devices? Because my users use also Android 2.1 :) – StErMi Apr 05 '12 at 07:40
  • "but again I don't know what support of CSS3 is there on your target devices." – durilka Apr 05 '12 at 14:13