Is it just me, or does the viewport-fit=cover feature not seem to function properly on

Question

Is it just me, or does the viewport-fit=cover feature not seem to function properly on

My goal is to have my website fill the screen on both sides when in landscape mode on IOS Safari, but I haven't found a solution that works.

I've included the following meta tag:

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

, and 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've noticed that changing the background color of the body tag works, but I need my background images to fill the space.

Does anyone have any ideas or solutions?

UPDATE:

Here is a screenshot illustrating the issue: https://i.sstatic.net/Ga73L.jpg

Below is the CSS code:

div.et_pb_section.et_pb_section_6 {
    background-position: center top;
    background-image: url(https://XXXXXX.com/wp-content/uploads/2023/05/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b3a6b5a4bcbdb7f9a4b5a0a0b1a6ba94e6acfaa4bab3">[email protected]</a>),linear-gradient(180deg,#80b6d7 0%,#d2c5de 100%)!important;
}

html css ios safari

Answer 1

Answer №1

Setting viewport-fit=cover works well in my experience, except when executed as a snippet. The desired outcome may not be visible when running the snippet on an iPhone. (It appears that snippets have limitations – even if displayed in full page mode, they are still contained within an iframe, thus restricting the scope of the meta tag to that iframe.)

Nevertheless, give this link a try as it contains essentially the same code as the snippet, and you will notice that the image correctly fills 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">

Answer 2

Setting viewport-fit=cover works well in my experience, except when executed as a snippet. The desired outcome may not be visible when running the snippet on an iPhone. (It appears that snippets have limitations – even if displayed in full page mode, they are still contained within an iframe, thus restricting the scope of the meta tag to that iframe.)

Nevertheless, give this link a try as it contains essentially the same code as the snippet, and you will notice that the image correctly fills 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">

Answer 3

Answer №2

After some investigation, I managed to pinpoint the issue. It turned out that there were two conflicting meta tags named viewport in my parent theme. By replacing the function in the child theme, I was able to resolve the conflict.

Answer 4

After some investigation, I managed to pinpoint the issue. It turned out that there were two conflicting meta tags named viewport in my parent theme. By replacing the function in the child theme, I was able to resolve the conflict.

Is it just me, or does the viewport-fit=cover feature not seem to function properly on

Answer №1

Answer №2

Similar questions

Managing the appearance of one DOM element using another DOM element

Angular is not displaying the data from the dynamically injected component in the main component

The NWjs iteration of Bad Time Simulator is having trouble playing background music

The image slideshow on W3 Schools displays images in a stacked formation

Tips for monitoring AVCaptureDevice.isTorchActive

Tips for creating a connecting line between two elements

PHP is only outputting a single row

In Chrome browser, the orientation of the options in the datalist remains consistent

Several target elements on a single page

Markdown automatically converts Jekyll YAML front-matter into an <hr> tag

Exploring Swift 3 capabilities: effortlessly showcase the JSON data stored within arrays

Store user inputs from HTML forms into database using Javascript

Mastering the implementation of UISearchBar with Core Data

Unable to conceal my DIV element using JavaScript

The jsonGenerator is unable to process strings containing spaces

Discover the power of using SVG sprites in Vue JS for dynamic, visually appealing CSS background

Nesting functionality in TailwindCSS is currently experiencing issues when used in conjunction with tailwindcss/nesting or postcss

When using CSS column-fill auto, the printed page breaks are disregarded

The image appears smaller than its actual size

Persistent white line in flexbox item that refuses to disappear