英文:
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标签上的背景颜色可以工作,但是我有背景图片需要填充空间。
有人有任何想法或解决方案吗?
更新:
这是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 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
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
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论