tags:

views:

1054

answers:

3
+6  Q: 

How do I get the WVGA Android browser to stop scaling my images?

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"&gt;&lt;/p&gt;
</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?

+6  A: 

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  2010-05-09 23:31:07
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
morganchristiansson  2010-10-12 09:09:15
@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  2010-10-12 21:21:20
@Dan Fabulich: I'm targeting LDPI/small devices such as HTC Tattoo and SE X10 Mini which sadly are both Android 1.6.
morganchristiansson  2010-10-13 08:41:16
A: 

I implemented

it works great within the 'android browser' but in my Webview Application it still resize!!

What can i Do?

Regards Chris

christian Muller  2010-06-01 12:01:51
You posted a question in the "answer" box. If you'd like to have your question answered, you should probably post it as a question here: http://stackoverflow.com/questions/ask
Dan Fabulich  2010-06-02 17:18:32
+1  A: 

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

Luke Venediger  2010-07-09 11:41:43

related questions

Make Browser Window Blink in Task Bar
Large File Download
Browser's Default CSS
Disable browser 'Save Password' functionality
What's the simplest way to decremement a date in Javascript by 1 day?
Browser scrollbar
Limitations of screen readers.
Version detection with Silverlight
Best way to fix CSS/JS drop-down problem in IE7 when page includes Google Map
Recommendations for browser add-on tools to help with development
Hyperlinks displaced on IE7
Building Standalone Applications in JavaScript
HTML differences between browsers
Browser Sync accross many machines
Getting selected text in a browser, cross-platform.
How to get PNG transparency working in browsers that don't natively support it?
Best WYSIWYG CSS editor?
Javascript events
Preferred way to use favicons?
IE6: To support or not to support.
Getting the text from a drop-down box
Other browsers
Drag and Drop to a hosted Browser control
How can I tell if a web client is blocking ads?
How can I determine a web user's time zone?