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

I'm having the same problem. I haven't got the time to work on it, but my idea is to create graphics with a higher pixels per inch and use those for both iphone 3g(s) and iphone 4.

Not sure if that's going to work tho. But worth a shot.

Answer 2

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)"
/>

Answer 3

A CSS media query should work:

@media only screen and (min-resolution: 300dpi) { ... }

Also, A List Apart offers a technique to consider for serving high-res images. The article is mainly about print styles, but applies here just as well.

Answer 4

I stumbled on this the other day: http://aralbalkan.com/3331

This will load an iPhone 4 stylesheet

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

Then in your low res stylesheet the magic move is to set your background size property to the size of the low res image.

.demoImage
{
    background-image: url(../images/my-image-64.png);
    background-size: 64px 64px;
    background-repeat: no-repeat;
}

Now in retina.css simply show the double res version

.demoImage
{
    background-image: url(../images/my-image-128.png);
}

Now the css background image will display a 128x128 image as if it was 64 css pixels providing a 1:1 image pixel to display pixel image display on an iPhone 4.