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

huangapple go评论78阅读模式
英文:

viewport-fit=cover does not work on the iOS Safari?

问题

我试图让我的网站在IOS Safari的横向模式下填充屏幕(刘海区域)的左右两侧,但是没有一个解决方案有效。

我已经添加了以下meta标签:

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

并且我还添加了以下CSS:

@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));
    }
}

我注意到body标签上的背景颜色可以工作,但是我有背景图片需要填充空间。

有人有任何想法或解决方案吗?

更新:

这里是我所说的截图:
viewport-fit=cover 在 iOS Safari 上不起作用?

这是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;
}
英文:

I am trying to get my website to fill the screen (notch) left and right sides when in landscape mode on IOS Safari but NONE of the solutions work.

I have added the meta tag &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, viewport-fit=cover&quot;&gt; and I have also added

@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));
    }
}

I have noticed that background color on the body tag does work but I have background images that need to fill the space.

Does anyone have any ideas or solutions?

UPDATE:

Here is a screen shot of what I am talking about
viewport-fit=cover 在 iOS Safari 上不起作用?

Here is the 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;
}

答案1

得分: 0

viewport-fit=cover 对我来说有效,但在片段中运行时不起作用。当您在 iPhone 上运行下面的片段时,您看不到期望的结果。(我认为这是片段的限制 - 即使片段显示在整个页面中,仍然位于一个 iframe 中,因此 meta 标签的范围仅限于该 iframe。)

但是,尝试此链接,它与片段几乎相同的代码,并且您可以看到图像确实填充在缺口区域周围(当手机处于横向方向时)。

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">
英文:

viewport-fit=cover seems to work for me, but not when run as a snippet. You do not see the desired result when you run the snippet below on an iPhone. (I believe this is a limitation of snippets — even a snippet showing in full page is still within an iframe, so the scope of the meta tag is limited to that iframe.)

However, try this link which has effectively the same code as the snippet, and you can see that the image does fill around the notch area (when the phone is in landscape orientation).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

答案2

得分: 0

弄清了问题。问题出在两个名为viewport的元标签互相冲突,最终发现是在我的父主题中。所以我能够从子主题中替换该函数。

英文:

Figured out the problem. It was the two meta tags named viewport conflicting with each other and it was eventually found in my parent theme. So I was able to replace the function from the child theme.

huangapple
  • 本文由 发表于 2023年6月14日 23:45:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/76475354.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定