javascript - 检测移动设备 "notch"

Question

随着 iPhone X 的发布迫在眉睫，我正试图走在游戏的前面并准备我的一些网络应用程序来处理任何设计更改——其中最大的更改是装有前置摄像头的新“刘海” .

我想知道是否有或可能有任何方法以某种方式在 Javascript 中检测到这一点。

有趣的是，Chris Coyier 写了一篇关于 The "Notch" and CSS 的文章这让我发现了 safe-area-inset-right 常量。有什么方法可以在 Javascript 中访问它，这是一个可靠的测试。

if (window.constant.safeAreaInsetRight) {
  var notch = true;
}

Answer 1

我最近打了这个。您可以将 CSS 环境变量 (env()) 的值设置为 CSS 自定义属性，然后通过 JavaScript 读取该值:

CSS:

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

JS:

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

完整信息在这里: https://benfrain.com/how-to-get-the-value-of-phone-notches-environment-variables-env-in-javascript-from-css/