iPad iPhone scale background images

问题:

Just wondering if anyone 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.

回答1:

This worked for on iPad:

-webkit-background-size: length_x length_y;

回答2:

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

回答3:

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

回答4:

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