使用JS或CSS检测iOS设备是否有主页栏
Pri*_*aly 16 javascript css ios progressive-web-apps
我正在为 iOS 构建一个 Web 应用程序，想知道是否可以使用 JS 或 CSS 来检测设备底部是否有屏幕上的 Home Bar（即 iPhone X、11 或 iPad Pro - 带圆角）并且没有主页按钮）。
因为如果创建选项卡栏，我需要知道是否在底部添加额外的填充来适应这一点，如下图所示。
由于无法使用媒体查询从这些设备的精确屏幕分辨率列表中进行检测并希望得到最好的结果，我无法提出解决方案。
有什么想法吗？
Sam*_*Sam 20
从这篇文章开始，我能够计算底部安全区域的高度，从而确定主页栏是否存在。如果返回非零像素值，则主页栏（可能）就在那里。如果它返回0px，则没有主页酒吧。
一定要阅读链接的帖子，但总体思路是，您将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何时不存在。
| 归档时间： |
|
| 查看次数： |
5365 次 |
| 最近记录： |