一种在iPad的Safari中修正背景缩放的方法？ [英] A way to correct background scaling in iPad's Safari?

问题描述

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

I have a website using a huge background image (2000x1500) in a div container (100% x 100%).

当我在Safari上打开该网站一个iPad，它的缩放比例（〜40％）不同于内容（〜80％）。

When I open that site on Safari on an iPad it gets scaled down (~40%) in a different proportion than the content (~80%).

我把背景移动到img标签div，宽度为100％，高度为100％，溢出设置为hidden。

I moved the background to an img-tag in a div with 100% width and 100% height and an overflow setting "hidden". Exactly the same happens.

有没有CSS设置可以帮助Safari缩放背景图片，比例与内容相同？

Is there a CSS Setting that can help Safari to scale down background images in the same proportion as the content?

推荐答案

你应该为iPad创建一个单独的样式表。
您可以使用以下操作：

You should definitely create a separate stylesheet for the iPad. You can use the following to do so:

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

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

On this link, you will find information about the orientation of your website on the iPad and how to deal with it.

我的建议是，为您的网站的iPad版本创建一个单独的样式表（css文件），不管你做什么，你应该创建

My advice would be, to create a separate stylesheet (css file) for the iPad version of your site, no matter what you do, you should just create it and add a link tag like the one shown above.

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

If you have a background of a picture that is 2000x1500px for the iPad version, you can reduce it to fit the iPad, if that's the only thing you've got a problem with. I'd say you should reduce the size of the image to 1024px and declare it in the separate stylesheet for the iPad, and you will see the end result.

让我

此外，您也应该阅读这篇文章： http://www.inspiredm.com/2010/02/09/ipad-design/

BTW you should read this article as well: http://www.inspiredm.com/2010/02/09/ipad-design/

这篇关于一种在iPad的Safari中修正背景缩放的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！