CSS 一种在 iPad 的 Safari 中纠正背景缩放的方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2966803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A way to correct background scaling in iPad's Safari?
提问by favo
I have a website using a huge background image (2000x1500) in a div container (100% x 100%).
我有一个网站，在 div 容器 (100% x 100%) 中使用了巨大的背景图像 (2000x1500)。
When I open that site on Safari on an iPad it gets scaled down (~40%) in a different proportion than the content (~80%).
当我在 iPad 上的 Safari 上打开该网站时，它会按与内容（~80%）不同的比例缩小（~40%）。
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.
我将背景移动到 div 中的 img-tag，宽度为 100%，高度为 100%，溢出设置为“隐藏”。完全相同的情况发生。
Is there a CSS Setting that can help Safari to scale down background images in the same proportion as the content?
是否有 CSS 设置可以帮助 Safari 以与内容相同的比例缩小背景图像？
采纳答案by UXdesigner
You should definitely create a separate stylesheet for the iPad. You can use the following to do so:
您绝对应该为 iPad 创建一个单独的样式表。您可以使用以下方法执行此操作：
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
On this link, you will find information about the orientation of your website on the iPad and how to deal with it.
在此链接上，您将找到有关您的网站在 iPad 上的定位以及如何处理的信息。
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 版本创建一个单独的样式表（css 文件），无论您做什么，您都应该创建它并添加一个如上所示的链接标签。
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.
如果 iPad 版本的图片背景为 2000x1500 像素，则可以将其缩小以适合 iPad，如果这是您唯一遇到的问题。我会说您应该将图像的大小减小到 1024 像素，并在 iPad 的单独样式表中声明它，您将看到最终结果。
Let me know how it goes.
让我知道事情的后续。
BTW you should read this article as well: http://www.inspiredm.com/2010/02/09/ipad-design/
顺便说一句，您也应该阅读这篇文章：http: //www.inspiredm.com/2010/02/09/ipad-design/
回答by Noel Saw
Adding this worked for me when I had a background image on the background canvas...
当我在背景画布上有背景图像时，添加这个对我有用......
body{ -webkit-background-size: 2000px 1400px;}
Obviously one has to replace the dimensions with the correct size for the image.
显然，必须用图像的正确尺寸替换尺寸。
回答by sticky IT
It seems that this issue only occurs on the iPad when you have a background image that is attached the the <body> tag. If you place the background image into a containing div, the issue can be resolved -- this is a great work-around if you don't need to have your background image "fixed", as the techniques to make background fixed work in IE mandate that you use the <body> tag for images.
这个问题似乎只发生在 iPad 上，当你有一个附加了 <body> 标签的背景图像时。如果您将背景图像放入包含 div 中，则可以解决该问题——如果您不需要“固定”背景图像，这是一个很好的解决方法，因为在 IE 中进行背景固定工作的技术要求您对图像使用 <body> 标签。
You can see the difference in these two sites, the first uses the <body> tag for positioning (due to the fixed positioning on the background image) and the second uses a containing div:
你可以看到这两个站点的区别，第一个使用 <body> 标签进行定位（由于背景图像上的固定定位），第二个使用包含 div：
http://www.mricsi.comhttp://www.collinshirsch.com
http://www.mricsi.com http://www.collinshirsch.com
Hope that helps!
希望有帮助！
edit -- this is not entirely accurate -- it seems like this is the case only some of the time, and the reason behind why is unclear.
编辑 - 这并不完全准确 - 似乎只是在某些时候是这种情况，背后的原因尚不清楚。
回答by Owen Denham
I've got a 5400x556 as a (scrolling) background image in a div. As a .jpg it gets scaled down drastically, as a .png it's fine. The only trouble now is the .png is 5 megs. Grr.
我在 div 中有一个 5400x556 作为（滚动）背景图像。作为 .jpg 它会被大幅缩小，作为 .png 很好。现在唯一的麻烦是 .png 是 5 兆。咕噜噜
Good call on the separate stylesheets though.
好的调用单独的样式表。
good luck
祝你好运
owen
欠
回答by Tadeu Luis
I use:
我用：
body {min-width:2000px; min-height:1500px }
回答by arnoudhgz
You can use the solution of @UXdesigner to create a seperated stylesheet for iPad. But you can use a single statement in your current stylesheet:
您可以使用@UXdesigner 的解决方案为 iPad 创建单独的样式表。但是您可以在当前样式表中使用单个语句：
@media only screen and (max-device-width: 1024px){
.yourClassname{
max-width: 500px;
}
}
and of course for smaller devices like phones you can use:
当然，对于像手机这样的小型设备，您可以使用：
@media only screen and (max-device-width: 480px){
.yourClassname{
max-width: 100px;
}
}
Note that these suggestions only work in CSS3(the latest devices all accept this)
请注意，这些建议仅适用于CSS3（最新设备都接受）
