Non-zoomable webview that works at both iPhone and iPhone4 resolutions

Question

I want to have a webview that has a single HTML and a single CSS file, shows graphics at the same size, but native resolution for each.

My existing webviews, designed for 320x480 seems to scaled up well (crisp text and border-radius for instance), though images are at half res in the iPhone4 simulator. How do I simulate the native image loading behaviour where a graphic or it's double res version is chosen automatically with HTML, CSS, or JS? (hopefully not JS)

I'm currently using a viewport declaration like so:

<meta content='initial-scale=0.5; maximum-scale=1.0; minimum-scale=0.5; user-scalable=0;' name='viewport' /> 

This zooms out and image pixels are 1:1 with display pixels, but it also scales down everything else. And of course makes it tiny on the smaller iPhone display.

I have a feeling this has something to do with some sort of viewport size media query?

Answer 1

This will load a specific stylesheet for iPhone 4:

<link
    rel="stylesheet" type="text/css" href="/css/style.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>