iPad iPhone缩放背景图片

Question

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.

Answer 1

这适用于iPad：

-webkit-background-size: length_x length_y;

Answer 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.

Answer 3

您所要做的就是在页面中添加此元标记，以防止缩放背景图像。

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

Answer 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