Question 189699 in Html Question posted in
Some basic documentation can be found here.

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

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
enter image description here

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/[email protected]),linear-gradient(180deg,#80b6d7 0%,#d2c5de 100%)!important;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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).

    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">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search