css – 在iPad的Safari中纠正背景缩放的一种方法?

前端之家收集整理的这篇文章主要介绍了css – 在iPad的Safari中纠正背景缩放的一种方法?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个网站使用巨大的背景图片(2000×1500)在div容器(100%x 100%)。

当我在iPad上的Safari上打开该网站时,它会按比例缩小(约40%),比例不同于内容(约80%)。

我将背景移动到一个具有100%宽度和100%高度和溢出设置“隐藏”的div中的img标记。完全一样的发生。

有一个CSS设置,可以帮助Safari缩放背景图像与内容的相同比例?

解决方法

你应该为iPad创建一个单独的样式表。
您可以使用以下操作:
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

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

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

如果你有一个图片的背景是2000x1500px的iPad版本,你可以减少它适合iPad,如果这是唯一的问题。我想说你应该将图像的大小减少到1024px,并在iPad的单独的样式表中声明它,你会看到最终的结果。

让我知道它怎么回事。

BTW你也应该阅读这篇文章http://www.inspiredm.com/2010/02/09/ipad-design/

猜你在找的CSS相关文章