Non-zoomable webview that works on both iPhone and iPhone4

Question

I want to have a web view with one HTML and one CSS file, display graphics of the same size, but my own resolution for each.

My existing 320x480 web reviews seem to scale well (like crisp text and radius radius), although the images are halfway in the iPhone4 simulator. How to simulate the loading behavior of a native image when a graphical or dual res version is automatically selected using HTML, CSS or JS? (hope not js)

I am currently using a view view declaration:

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

This reduces the scale, and the image pixels are 1: 1 with the pixels of the display, but also reduce everything else. And, of course, it's tiny on the smaller screen of the iPhone.

Do I have a feeling that this is due to some kind of multimedia request in the viewport format?

Answer 1

I came across this the other day: http://aralbalkan.com/3331

This will load the 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-resolution style sheet, the magic action is to set the background property for the size of the low-resolution image.

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

Now in retina.cssjust 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 were 64 css pixels providing a 1: 1 image pixel to display the image of the pixel images on iPhone 4.

Answer 2

iPhone 4:

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

Answer 3

. , - iphone 3g (s) iphone 4.

, . .

Answer 4

A CSS :

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

, A List Apart . , .