viewport-fit=cover在iOS Safari上不起作用？

yx2lnoni 于 2023-06-25 发布在 iOS

关注(0)|答案(2)|浏览(222)

我试图让我的网站填补屏幕（缺口）左右两侧时，在横向模式的IOS Safari，但没有一个解决方案工作。
我添加了 meta标签<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">，我还添加了

@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

我已经注意到身体标签上的背景颜色确实起作用，但我有背景图像需要填补空间。
有没有人有任何想法或解决方案？
更新：
下面是我所谈论的

的屏幕截图
这里是CSS

div.et_pb_section.et_pb_section_6 {
    background-position: center top;
    background-image: url(https://XXXXXX.com/wp-content/uploads/2023/05/graphic-pattern@2x.png),linear-gradient(180deg,#80b6d7 0%,#d2c5de 100%)!important;
}

ios

来源：https://stackoverflow.com/questions/76475354/viewport-fit-cover-does-not-work-on-the-ios-safari

2条答案

按热度按时间

7ivaypg91#

viewport-fit=cover似乎对我有用，但作为代码片段运行时就不行了。在iPhone上运行下面的代码段时，您不会看到所需的结果。（我相信这是片段的一个限制-即使是完整页面中显示的片段仍然在iframe内，所以 meta标签的范围仅限于iframe。
但是，尝试this link，它的代码实际上与代码片段相同，你可以看到图像确实填充了缺口区域（当手机处于横向时）。

body {
  background-image: url(https://picsum.photos/id/237/1000);
  background-size: cover;
  background-position: center;
  height: 100svh;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

赞(0）回复(0）举报 2023-06-25

qxsslcnc2#

解决了问题这是两个名为viewport的 meta标签相互冲突，最终在我的父主题中找到了它。因此，我能够替换子主题中的函数。

赞(0）回复(0）举报 2023-06-25

我来回答

viewport-fit=cover在iOS Safari上不起作用？

2条答案

相关问题

热门标签

最新问答