Question

This Content is from Stack Overflow. Question asked by Nolan Gelinas

I’m trying to get my website to fit inside my phone screen. I have tried many variations of env(safe-area-inset-bottom) and constant(safe-area-inset-bottom) but both always return 0px (I’ve been using an app called Inspect to debug CSS on my iPhone 13). I’ve made sure to add to my HTML but this has no effect. Could someone please explain how I can ensure that my site doesn’t go past the bottom URL bar on ios 15 Safari? I’ve attached screenshots from my phone showing the problem:

Solution

I think I made it work using -webkit-fill-available the other day which respects safe area.

body {
    min-height: -webkit-fill-available;
}

Answered by pronebird

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 4.0.