使用 JS 或 CSS 检测 iOS 设备是否有 home bar答案

【问题标题】：Detect whether an iOS device has a home bar using JS or CSS使用 JS 或 CSS 检测 iOS 设备是否有 home bar
【发布时间】：2020-08-21 23:44:36
【问题描述】：

我正在为 iOS 构建一个网络应用程序，并且想知道是否可以使用 JS 或 CSS 来检测设备底部是否有屏幕 Home Bar（即 iPhone X、11 或 iPad Pro -圆角，没有主页按钮）。

因为如果创建标签栏，我需要知道是否在底部添加额外的填充以适应这一点，如下图所示。

没有使用媒体查询从这些设备的确切屏幕分辨率列表中检测并希望获得最好的结果，我无法提出解决方案。

有什么想法吗？

【问题讨论】：

在这个里面放一个别针。您需要考虑 iOS 的“安全”区域，并且要使用 iOS 特定的媒体查询......需要查找内容......这可能是我目前所知道的关于 iPhone 特定布局 CSS @ 的最佳文章987654322@ 这是苹果的文章webkit.org/blog/7929/designing-websites-for-iphone-x
请注意，const 已更改为 env
你找到解决办法了吗？我正在为这个确切的事情而苦苦挣扎！这看起来很有希望，但我无法让它返回 0px 的任何内容：benfrain.com/…

标签： javascript css ios progressive-web-apps

【解决方案1】：

从this post 开始工作，我能够计算出底部安全区域的高度，从而确定主栏是否存在。如果您返回一个非零像素值，则主栏（可能）在那里。如果返回0px，则没有home bar。

一定要阅读链接的帖子，但一般的想法是您将CSS env() function 设置为:root 元素，然后读回计算的值。

工作原理如下：

首先，您需要使用整个可用屏幕，方法是将其放在文档的 <head> 部分：

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

然后，添加到您的 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);
}

最后，在 Javascript 中读回该值：

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

当 home bar 存在时，它应该返回一个类似于 34px 的值，而当它不存在时，它应该返回一个类似于 0px 的值。

【讨论】：