时间戳

首页 > 解决方案 > 使用 JS 或 CSS 检测 iOS 设备是否有 home bar

javascript - 使用 JS 或 CSS 检测 iOS 设备是否有 home bar

问题描述

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

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

在此处输入图像描述

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

有什么想法吗？

标签： javascriptcssiosprogressive-web-apps

解决方案

通过这篇文章，我能够计算出底部安全区域的高度，从而确定主栏是否存在。如果您返回一个非零像素值，则主栏（可能）在那里。如果它返回0px，则没有 home 栏。

一定要阅读链接的帖子，但一般的想法是你将CSSenv()函数设置为: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")

这应该返回一个值，例如34px主栏出现0px时和不出现时。

推荐阅读