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 320×480 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 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 128×128 image as if it was 64 css pixels providing a 1:1 image pixel to display pixel image display on an iPhone 4.