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?