检查 padding-top: env (safe-area-inset-top);

Question

Tell me please. I am making a website that can be logged in both from a browser and my application on ios 14 (webview is used internally). How can I make a check on a safe area.

 #block { width: 100px; height: 100px; background: red; padding-top: 10px; padding-top: env(safe-area-inset-top); }

 <div id="block"> </div>

It is necessary to make it so that from the browser padding-top is 10px and from the application, on the device where there is a safe-area padding-top was env(safe-area-inset-top) . Thanks in advance.

Answer 1

#block {
  width: 100px;
  height: 100px;
  background: red;
  padding-top: env(safe-area-inset-top, 10px);
}

env() permits a fallback value.

Answer 2

  width: 100px;
  height: 100px;
  background: red;
  padding-top: calc(10px + env(safe-area-inset-top));
}

This should work.With 10px by default and adding safe-area-inset in ios devices

Answer 3

Try adding a media query for your specific screen size, like so:

 #block { width: 100px; height: 100px; background: red; padding-top: 10px; } @media only screen and (max-width: 600px) { #block { padding-top: env(safe-area-inset-top); } }

 <div id="block"> </div>