22

I'm designing an HTML page for display in Android browsers. Consider this simple example page:

<html>
<head><title>Simple!</title>
</head>
<body>
<p><img src="http://sstatic.net/so/img/logo.png"></p>
</body>
</html>

It looks just fine on the standard HVGA phones (320x480), but on HDPI WVGA sizes (480x800 or 480x854) the built-in browser automatically scales the image up; it looks ugly.

I've read that I should be able to use this tag to force the browser to stop scaling my page:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />

... but all that does is disable user scaling (the zoom buttons disappear); it doesn't actually prevent the browser from scaling my image. Adjusting the scale factors (setting them all to 2.0 or 0.5) has no effect at all.

How can I force the WVGA browser to stop scaling my images?

Dan Fabulich
  • 37,506
  • 41
  • 139
  • 175
  • I've noticed that configuring the "Default Zoom" setting in the browser's settings to "Far" will disable image scaling, but I can't expect all of my users to do this. – Dan Fabulich May 09 '10 at 15:56
  • 1
    There's an API to set "Default Zoom" added in Android 2.1 / API level 7. webview.getSettings().setDefaultZoom() – Morgan Christiansson Oct 12 '10 at 09:08
  • For the purposes of this question, I'm building a web site, not an Android app with a WebView, so I can't use the Android API. – Dan Fabulich Oct 12 '10 at 21:22

2 Answers2

32

Ah, found it by searching through the Android source code. There's a new Android-specific "target-densityDpi" setting available in the "viewport" meta tag; as far as I can tell, it's totally undocumented, except for the check-in comment!

Add dpi support for WebView.

In the "viewport" meta tag, you can specify "target-densityDpi". If it is not specified, it uses the default, 160dpi as of today. Then the 1.0 scale factor specified in the viewport tag means 100% on G1 and 150% on Sholes. If you set "target-densityDpi" to "device-dpi", then the 1.0 scale factor means 100% on both G1 and Sholes.

Implemented Safari's window.devicePixelRatio and css media query device-pixel-ratio.

So if you use "device-dpi" and modify the css for font-size and image src depending on window.devicePixelRatio, you can get a better page on Sholes/Passion.

Here is a list of options for "target-densityDpi".

device-dpi: Use the device's native dpi as target dpi. low-dpi: 120dpi medium-dpi: 160dpi, which is also the default as of today high-dpi: 240dpi : We take any number between 70 and 400 as a valid target dpi.

Dan Fabulich
  • 37,506
  • 41
  • 139
  • 175
  • Support for target-densityDpi was added to Android Source on 21 Sep 2009 and doesn't seem to have been included in Android 1.6 at least. It was added in this commit: https://android.git.kernel.org/?p=platform/external/webkit.git;a=commit;h=f10585d69aaccf4c1b021df143ee0f08e338cf31 – Morgan Christiansson Oct 12 '10 at 09:09
  • @morganchristiansson That's true, but there are very few Android 1.6 HDPI devices in the wild. LG has a couple of phones that fit that profile... Those people will probably have a bad experience. – Dan Fabulich Oct 12 '10 at 21:21
  • I'm targeting LDPI/small devices such as HTC Tattoo and SE X10 Mini which sadly are both Android 1.6. – Morgan Christiansson Oct 13 '10 at 08:41
  • 2
    Not sure if it makes a difference but the docs are not capitalizing any of it - it's target-densitydpi not target-densityDpi as in http://developer.android.com/reference/android/webkit/WebView.html – DyeA Dec 02 '11 at 03:10
5

It's now part of the API documentation for the WebView: http://developer.android.com/reference/android/webkit/WebView.html

See the section entitled Building web pages to support different screen densities

user141682
  • 432
  • 6
  • 9