如何在 Ipad/Iphone (safari) 中将 Body/Html 背景与 CSS 联系起来

Question

我正在配置我的 404 页面。

在这个页面中，我只使用了“COVER”背景：

html { 
  background: url(../img/404.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  overflow: hidden;
}

没问题.. 404.jpg 图片覆盖了 IE、Edge、Chrome 和 IPAD/IPHONE Safari 的所有屏幕。

但是.. 因为这是一个 404 页面 - 我放了一条消息：“点击这里返回主页。”

并用这个创建一个“可点击的背景”：

html #background-link {
position: absolute;
height:11000px;
text-indent:-9999px;
width:1440px;
top: 0; left: 0;
border: 0;
float: left;
}

在 IE、Edge、Chrome 上运行良好..

但是.. 在 IPAD/IPHONE Safari 上 - 背景图像看起来更大，可能是其原始大小的 100% - 而不是作为封面（作为没有第二个 css 代码的作品）。

但“链接”工作正常。

唯一的问题是封面图片 - 就我而言，在 IE/EDGE/CHROME 上，我看到一个男人在蓝屏背景前。在 IPAD/IPHONE 上，我只看到蓝屏背景 - 在这种情况下，左上角.. 不是作为封面屏幕的图像。

Answer 1

这是因为您为 #background-link 选择器提供的尺寸；它们大于您正在查看的设备的屏幕尺寸，从而迫使页面尺寸增大以适应它们。

一种解决方案是为所有四个定位属性提供值，而不是提供明确的尺寸，如下所示：

#background-link{
    border:0;
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    text-indent:-9999px;
    top:0;
}

注意：根据 Daniel 在下面的评论，html 标记上的 overflow:hidden 声明也需要删除才能使此解决方案正常运行。