background-size:封面不适用于iOS

Question

background-size:封面不适用于iOS

这是我的代码:

background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center;

Run Code Online (Sandbox Code Playgroud)

它适用于台式机,iPad和Android手机:

在iPhone上的Chrome和Safari上,背景太大了:

Answer 1

Mat*_*cca 62

你有这种情况background-attachment:fixed.在移动设备上,我通常会放入查询background-attachment:scroll内部@media.

正如@RyanKimber指出的那样,固定附加图像使用整个<body>尺寸.在移动设备上,这可能会变得非常高,从而将您的图像吹走.将附件设置为scroll允许封面图像在其自己的容器内拉伸.

对我来说几乎是完美的答案，因为如果有必要，我不介意切换到“背景附件：滚动”。我刚刚调整媒体查询以仅针对 IOS 移动设备。`@supports (-webkit-overflow-scrolling: touch) { body *: { 背景附件: 滚动; 我在另一个 stackoverflow 帖子上发现了这个技巧（/sf/answers/3347289291/） (3认同)

Answer 2

Vik*_*amp 50

在不添加任何新html节点或使用@media查询的情况下,只使用一个css来阐述Ryan的答案.

如果你想在包括iOS在内的所有设备上保持cover大小的fixed背景,而不添加新的节点,那么诀窍就是在元素(主体)本身而不是背景上进行固定定位,因为固定的背景和封面尺寸混乱iOS版.

它也像iOS上的魅力一样在制作中使用:https://www.doklist.com/

这段代码不起作用,因为iOS使用的是hight document而不是viewport:

body {
      background: url(https://www.w3schools.com/css/trolltunga.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Run Code Online (Sandbox Code Playgroud)

现在这是魔术,body:after是固定的,而不是背景:

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Run Code Online (Sandbox Code Playgroud)

我可以使用身体本身,"位置:固定;溢出-y:滚动",但我不想弄乱身体的位置和我的整体布局.

所以在身体上这样做:以后是一个非常容易的修复.我已经在Mac和iOS上测试了解决方案,包括firefox,safari,chrome.

我还为此创建了一个带有2个示例的github repo:https://github.com/thesved/fixed-cover-background

Answer 3

小智 16

这里有一个简单的解决方法，使Safari浏览器中的图片能够正常显示（仅在Safari浏览器中滚动，而不是在其他媒体中固定）

@supports ( -webkit-touch-callout : none) {
.selector {
background-attachment:scroll
}
}

@supports not ( -webkit-touch-callout : none) {
.selector {
background-attachment: fixed;
}
}

Run Code Online (Sandbox Code Playgroud)