I have mobile web application where I draw graphics by using CSS3/HTML5.
It looks good on iPhone3G and iPhon3GS as they have the same pixel ratio.
However when I open the same web page on iPhone4 or iPhone4S it looks exactly the same as on iPhone3G with our regard to the better pixel ratio.
My question is:
Can I enforce iPhone4 device to use it’s pixel ratio instead of iPhone3G pixel ratio?
If I save the graphics to device’s drive and open it in Camera Roll, I see the difference on iPhone3G and iPhone4, so I’d like to see it on the web as well.
The truth is iPhone 4 comes with a 326-DPI screen, twice the original iPhone screen. This means that this new device has double width, double height in the same physical screen size. That is why Apple decided to give its browser the same CSS, viewport, and JavaScript dimensions as the low-DPI device, 320×480, and created a pixel-ratio of 2. This means that for every pixel, four real pixels will be drawn (a 2x zoom). Therefore, your website will render equally in iPhone 3GS or iPhone 4. If you still want to show high-DPI image you can use media query condition
-webkit-min-device-pixel-ratio: