iPad iPhone scale background images

Just wondering if an开发者_如何学编程yone else has experienced the iPad/iPhone scaling their background images down to fit the view port.

In my case, I'm swapping out background images via javascript, and the new background images are super wide to fit large displays. However, the iPad is scaling down the background images that are added to the DOM via javascript. I solved this by using "-webkit-background-size" set to the size that the image should be, but this causes the background image to be stretched and pixelated.

This worked for on iPad:

-webkit-background-size: length_x length_y;

The iphoneOS scales every picture with above 2 million pixels (width*height) 50% down. I managed it with spliting the background into two pictures.

All you have to do is add this meta tag within the of your pages to prevent the background image from being scaled.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

First of all, if you export your image as a 32 bit png (I use Fireworks to do so), and use that png in your background instead of a jpg file, IOS won't scale the image. Works like a charm, and the size is about the same as a jpg with 100% quality (slightly smaller actually)

Also, aditionally for a better experience in ipad / iphone, you should:

a) set a min with do the body tag (mine is usually 980px)

body {
    min-width: 980px;
}

b) set the same width to the viewport meta tag

<meta name="viewport" content="width=980px">

Users should now be able to:
- see the design as you have created it
- zoom the content (wich they couldn't if you used "initial-scale=1, maximum-scale=1" on the viewport meta tag)
- change the device landscape to portrait and vice versa with no issues