17

I am building a web app for iOS, and want to know if it's possible using JS or CSS to detect whether a device has the on-screen Home Bar at the bottom (i.e. an iPhone X, 11, or iPad Pro - with rounded corners and no home button).

Because if creating a tab bar, I need to know whether or not to add the additional padding at the bottom to accommodate this, as illustrated in the image below.

enter image description here

Short of using media queries to detect from a list of EXACT screen resolutions for these devices and hoping for the best, I can't come up with a solution.

Any ideas out there?

3
  • putting a pin in this. You need to account for the iOS 'safe' area and there are iOS specific media queries to use....need to look up things... This might be the best article I know of at the moment on iPhone specific layout CSS css-tricks.com/the-notch-and-css and here is Apple's article webkit.org/blog/7929/designing-websites-for-iphone-x
    – Chris Love
    Commented Aug 22, 2020 at 0:02
  • and note, const was changed to env
    – Chris Love
    Commented Aug 22, 2020 at 0:14
  • Have you found any solution? I'm struggling with this exact thing! This seems promising, but I can't get it to return anything by 0px: benfrain.com/…
    – Sam
    Commented Sep 18, 2020 at 0:15

2 Answers 2

20

Working from this post, I was able to calculate the height of the bottom safe area, thus determining whether the home bar is present. If you return a non-zero pixel value, the home bar is (probably) there. If it returns 0px, no home bar.

Definitely read the linked post, but the general idea is that you'll set the CSS env() function to the :root element and then read the calculated value back.

Here's how it works:

First, you'll need to use the whole available screen by putting this in the <head> section of your document:

<meta name="viewport" content="viewport-fit=cover" />

Then, add to your CSS:

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom); /* THIS ONE GETS US THE HOME BAR HEIGHT */
    --sal: env(safe-area-inset-left);
}

Finally, read back the value in Javascript:

getComputedStyle(document.documentElement).getPropertyValue("--sab")

This should return a value like 34px when the home bar is present and 0px when it ain't.

0

the webkit has a bug.

env(safe-area-inset-*) will be 0px when the first page load.

refer the bug report : https://bugs.webkit.org/show_bug.cgi?id=191872#c5

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.