一种在iPad的Safari中更正背景缩放的方法？

我有一个网站在div容器（100％x 100％）中使用巨大的背景图像（2000x1500）。一种在iPad的Safari中更正背景缩放的方法？

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

我将背景移动到100％宽度和100％高度的div以及溢出设置“隐藏”的img-tag中。完全相同的事情发生。

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

2010-06-03 favo

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

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

在这个环节，你会发现你的网站在iPad上的方向和如何处理它的信息。

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

如果您的背景为iPad版本的图片为2000x1500px，那么您可以将它降低到适合iPad，如果这是您唯一遇到的问题。我会说你应该将图像的大小减小到1024px，并在iPad的单独样式表中声明它，并且你会看到最终结果。

让我知道它是怎么回事。

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

来源

2010-06-03 14:25:54 UXdesigner

这工作完美，谢谢！我开始为背景容器使用第二个具有固定像素大小的CSS，也感谢文章 - +1！ – favo 2010-06-03 14:43:13

不客气。我只注意到我参考，我响应一个链接，但我没有贴链接：关于iPad的布局方向：http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes – UXdesigner 2010-06-03 19:31:19

只是一个除了回答@UXdesigner给出 - 利用''标签不打破IE浏览该网站。 – vikmalhotra 2010-07-26 01:36:10

看来，当你有一个附加的的<体>标签的背景图像此问题仅出现在iPad上。如果将背景图像放入包含div的问题中，问题可以得到解决 - 如果您不需要将背景图像“固定”，这是一个很好的解决方法，因为使背景固定在IE中的技术要求您使用<机身>标签图像。

可以看到在这两个位点的不同，首先使用用于定位的<体>标签（由于在背景图像上的固定定位）和第二个使用的含DIV：

http://www.mricsi.com http://www.collinshirsch.com

希望有帮助！

编辑 - 这是不完全准确的 - 似乎这只是一些时间的情况，以及为什么背后的原因还不清楚。

来源

2010-09-15 17:48:27

我有一个5400x556作为（滚动）背景图像在一个div中。作为一个.jpg，它得到了大幅度的缩减，就像一个.png一样。现在唯一的麻烦是.png是5 megs。格儿。

虽然在单独的样式表上有很好的调用。

好运

欧文

来源

2010-09-28 06:34:25

添加这个工作对我来说，当我不得不在背景画布背景图片...

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

显然，一个有正确的更换尺寸图像的大小。

来源

2011-05-06 00:16:44

我确认这工作得很好。谢谢。 – madr 2011-09-05 15:23:49

只需要这个作为一个快速修复，就像一个魅力。 – EinLama 2012-03-01 10:39:34

IOS还可以进行扩展200万像素+图像下来，当心http://stackoverflow.com/questions/2860387/ipad-iphone-scale-background-images – vearutop 2012-07-03 15:39:08

我用：

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

来源

2011-09-24 13:49:38

可以使用@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工作（最新设备全部接受）

来源

2012-08-03 13:11:20 arnoudhgz

一种在iPad的Safari中更正背景缩放的方法？

回答

相关问题