Question

我有一个在div容器中使用巨大背景图像（2000x1500）的网站（100％x 100％）。

当我在iPad上的Safari上打开该网站时，它的缩小比例（~40％）与内容的比例不同（约80％）。

我将背景移动到div中的img-tag，宽度为100％，高度为100％，溢出设置为“hidden”。恰好相同。

是否有CSS设置可以帮助Safari按照与内容相同的比例缩小背景图像？

Answer 1

当我在背景画布上有背景图片时，添加这个对我有用...

body{ -webkit-background-size: 2000px 1400px;}

显然，必须用尺寸正确的尺寸替换尺寸。

Answer 2

你绝对应该为iPad创建一个单独的样式表。您可以使用以下命令：

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

在此链接上，您可以找到有关您的网站在iPad上的方向以及如何处理它的信息。

我的建议是，为您的网站的iPad版本创建一个单独的样式表（css文件），无论您做什么，您都应该创建它并添加如上所示的链接标记。

如果您的iPad版本的背景为2000x1500像素，则可以将其缩小以适应iPad，如果这是您唯一遇到问题的话。我会说你应该将图像的大小减小到1024px并在iPad的单独样式表中声明它，你会看到最终的结果。

让我知道它是怎么回事。

顺便说一句，你也应该阅读这篇文章：http://www.inspiredm.com/2010/02/09/ipad-design/

Answer 3

似乎这个问题只发生在iPad上，当你有一个附加了＆lt; body＆gt;的背景图片时标签。如果你把背景图像放到一个包含的div中，问题就可以解决 - 如果你不需要将你的背景图像“修复”，这是一个很好的解决方法，因为在IE中修改后台的工作技术要求你使用＆lt; body＆gt;标记图像。

你可以看到这两个网站的区别，第一个使用＆lt; body＆gt;定位标记（由于背景图像上的固定位置），第二个使用包含div：

希望有所帮助！

编辑 - 这并不完全准确 - 似乎只是在某些时候才是这种情况，其背后的原因尚不清楚。

Answer 4

我有一个5400x556作为div中的（滚动）背景图像。作为一个.jpg它会大幅缩小，作为一个.png就可以了。现在唯一的麻烦是.png是5兆。 GRR。

虽然对单独的样式表有好的调用。

祝你好运

欧文

Answer 5

我用：

 body {min-width:2000px; min-height:1500px }

Answer 6

您可以使用@UXdesigner的解决方案为iPad创建一个单独的样式表。但是您可以在当前样式表中使用单个语句：

@media only screen and (max-device-width: 1024px){
  .yourClassname{
    max-width: 500px;
  }
}

当然，对于像手机这样的小型设备，您可以使用：

@media only screen and (max-device-width: 480px){
  .yourClassname{
    max-width: 100px;
  }
}

请注意，这些建议仅适用于CSS3（最新设备均接受此操作）