iPad iPhone缩放背景图片

Question

只是想知道是否有其他人经历过iPad / iPhone缩放背景图像以适应视口。

在我的情况下，我通过javascript交换背景图像，新的背景图像非常宽，适合大型显示器。但是，iPad正在缩小通过javascript添加到DOM的背景图像。我通过使用“-webkit-background-size”设置为图像应该的大小来解决这个问题，但这会导致背景图像被拉伸和像素化。

Answer 1

这适用于iPad：

-webkit-background-size: length_x length_y;

Answer 2

iphoneOS将每张200万像素（宽*高）50％的图片缩小。 我通过将背景分成两张图片来管理它。

Answer 3

您只需在页面中添加此元标记，以防止缩放背景图像。

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

Answer 4

首先，如果您将图像导出为32位png（我使用Fireworks这样做），并在背景中使用该png而不是jpg文件，IOS将不会缩放图像。像魅力一样，大小与100％质量（实际上略小）的jpg大致相同

另外，为了获得更好的ipad / iphone体验，你应该：

a）用body标签设置一个min（我的通常是980px）

body {
    min-width: 980px;
}

b）将相同的宽度设置为视口元标记

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

用户现在应该能够：
- 看看你创造的设计
- 缩放内容（如果在视口元标记上使用“initial-scale = 1，maximum-scale = 1”，则无法缩放内容）
- 将设备格局更改为纵向，反之亦然