Menu
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.
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?
801
Here's how you can check whether someone on your website or app is using a mobile iOS device in JavaScript: const ios = () => { if (typeof window === `undefined` || typeof navigator === `undefined`) return false; return /iPhone|iPad|iPod/i. test(navigator. userAgent || navigator.
The home indicator (If I'm getting the name correct) is that little bar at the bottom of an iPhone screen that you swipe up in order to return to the home screen. This bar replaced the home button / finger print scanner of older models.
Anthony Bouchard ∙ May 19, 2020. If your iPhone doesn't have a Home Button, then it probably has a Home Bar instead. The Home Bar provides a convenient pathway for accessing the Home Screen, App Switcher, Reachability, and other imperative things, but one thing Apple appears to have left out is customization.
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.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
