iOS Safari 放大高分辨率背景图像

Posted 2023-03-06

【中文标题】iOS Safari 放大高分辨率背景图像

【英文标题】：iOS Safari zooming in on high resolution background images

【发布时间】：2014-08-01 21:49:36

【问题描述】：

我正在开发一个具有高分辨率背景图片的网站。背景图片使用以下 CSS 设置

#intro 
background: url(https://s3.amazonaws.com/ooomf-com-files/XIBPemROQ9iJdUMOOBmG_IMG_1863.jpg) no-repeat 50% 50% fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;

在我的桌面上查看时效果很好。

在 Firefox 的响应式视图中查看时，它按预期工作。

但是，在我安装了 ios 7 的 iPhone 5 上查看此内容时，会出现此内容。

设置时出现问题

background-size: cover;

但我似乎无法弄清楚。我已经在网上搜索过了。

网站本身，在开发环境中：

http://websites.terarion.com/ehlen/

还有我得到背景的地方：

http://unsplash.com/

【参考方案1】：

哇，好像 Mobile Safari does not support background-attachment: fixed （或者，至少不支持它......）

如果您删除它，background-size: cover 的行为与您预期的一样，但它会破坏预期的行为...

如果需要，有一些work arounds for Mobile Safari 涉及内容后面的固定位置元素以模仿background-attachment: fixed。

离题，但喜欢这个设计！

【讨论】：

无赖。我将尝试使用其中一种解决方法。我会在它工作时报告。大多数 CSS 只是常规的引导程序，只是带有一些定位。仍然感谢设计：D