在iPad的Safari中纠正背景缩放的方法？

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/