使用JS或CSS检测iOS设备是否有主栏
使用JS或CSS检测iOS设备是否有主栏
提问于 2020-08-21 23:44:36
我正在为iOS构建一个web应用程序，并想知道是否可以使用JS或CSS来检测设备底部是否有屏幕上的母栏(即iPhone X，11，或iPad Pro -带有圆角，没有主按钮)。
因为如果创建选项卡条，我需要知道是否在底部添加额外的填充以适应这种情况，如下图所示。
除非使用媒体查询从这些设备的屏幕分辨率列表中检测到这些设备的确切屏幕分辨率，而且希望达到最好的效果，否则我无法找到解决方案。
外面有什么想法吗？
回答 1
Stack Overflow用户
发布于 2020-09-18 00:56:25
在这个职位工作时，我能够计算出底部安全区域的高度，从而确定主栏是否存在。如果您返回一个非零像素值，主栏(可能)在那里.如果它返回0px，则没有主栏。
当然可以读取链接的post，但是一般的想法是将函数设置为: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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63531281
复制相关文章
相似问题
腾讯云开发者
