Question

随着iPhone X的推出迫在眉睫，我正试图超越游戏并准备一些我的网络应用程序来处理任何设计变更 - 其中最大的一个是装有前置摄像头的新“缺口”

我想知道是否存在或者可能是以某种方式在Javascript中检测到这种情况的任何方式。

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

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

Answer 1

这可能有些笨拙但是，获得屏幕可用的高度和宽度并将它们与此规格相匹配将允许我们确定它是否是iPhone X.

请注意

在纵向方向上，iPhone X上的显示宽度匹配 iPhone 6，iPhone 7和iPhone 8的4.7英寸显示屏的宽度。然而，iPhone X上的显示器比4.7“高出145pt 显示...

所以，首先，你要通过userAgent检查它是否是iPhone，其次你会检查实际屏幕的区域（不包括默认为纵向的方向），最后，一旦我们知道它是iPhoneX通过它的屏幕尺寸，您可以确定方向（基于上面iPhone X图表下的表格）

if (navigator.userAgent.match(/(iPhone)/)){
  if((screen.availHeight == 812) && (screen.availWidth == 375)){

    if((window.innerHeight == "375") && (window.innerWidth == "812")){
      // iPhone X Landscape

    }else{
      // iPhone X Portrait
    }
  }
}

参考文献：

avilHeight

avilWidth

iPhoneX Specs

至于CSS解决方案，我昨天发现了一篇有趣的文章，可能有用

假设您有一个固定位置标题栏，以及您的iOS CSS 10目前看起来像这样：

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;

    padding-top: 20px; /* Status bar height */
}

为iPhone X和其他iOS 11自动调整设备，您可以在视口中添加viewport-fit = cover选项元标记，并更改CSS以引用常量：

header {
    /* ... */

    /* Status bar height on iOS 10 */
    padding-top: 20px;

    /* Status bar height on iOS 11+ */
    padding-top: constant(safe-area-inset-top);
}

为旧设备保留后备值非常重要我不知道如何解释constant（）语法。你也可以使用 CSS calc（）表达式中的常量。

Article

Answer 2

// iphone X detection

function hasNotch() {
    if (CSS.supports('padding-bottom: env(safe-area-inset-bottom)')) {
      let div = document.createElement('div');
      div.style.paddingBottom = 'env(safe-area-inset-bottom)';
      document.body.appendChild(div);
      let calculatedPadding = parseInt(window.getComputedStyle(div).paddingBottom, 10);
      document.body.removeChild(div);
      if (calculatedPadding > 0) {
        return true;
      }
    }
    return false;
  }

Answer 3

自@ youssef-makboul的回答以及@hjellek评论后，iOS已从constant（）更改为env（）语法，并且需要回退以支持所有当前iPhone X iOS版本的此方法。 / p>

const hasNotch = function () {
    var proceed = false;
    var div = document.createElement('div');
    if (CSS.supports('padding-bottom: env(safe-area-inset-bottom)')) {
        div.style.paddingBottom = 'env(safe-area-inset-bottom)';
        proceed = true;
    } else if (CSS.supports('padding-bottom: constant(safe-area-inset-bottom)')) {
        div.style.paddingBottom = 'constant(safe-area-inset-bottom)';
        proceed = true;
    }
    if (proceed) {
        document.body.appendChild(div);
        let calculatedPadding = parseInt(window.getComputedStyle(div).paddingBottom);
        document.body.removeChild(div);
        if (calculatedPadding > 0) {
            return true;
        }
    }
    return false;
};

Answer 4

我最近打了这个。您可以将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/

Answer 5

要添加的内容：

确保index.html中包含以下内容

9 files are existed in the directory /home/var/foo

另外：

关于此的出色文章：CSS Tricks Notch

Answer 6

我正在使用：

à

CSS 是打字稿的全局接口库：

function hasNotch() {

    //iphone X 1.11
    if (document.documentElement.clientHeight == 812 && document.documentElement.clientHeight == 375 && !!window.matchMedia && window.matchMedia("only screen and (-webkit-device-pixel-ratio: 3)").matches && iOSversion()[0] == 11) {
        return true;
    }

    var proceed = false;
    var div = document.createElement('div');
    if (CSS.supports('padding-bottom: env(safe-area-inset-bottom)')) {

        div.style.paddingBottom = 'env(safe-area-inset-bottom)';
        proceed = true;
    } else if (CSS.supports('padding-bottom: constant(safe-area-inset-bottom)')) {

        div.style.paddingBottom = 'constant(safe-area-inset-bottom)';
        proceed = true;
    }
    if (proceed) {
        return true;
    }

    return false;
};

或在 CSS 中：

interface CSS {
    escape(value: string): string;
    supports(property: string, value?: string): boolean;
}
declare var CSS: CSS;

Answer 7

在页面中添加0.7k notch-detected-event脚本。如果设备包含一个陷波，它将触发# …事件：

notch-detected

它还将window.addEventListener('notch-detected', function(e) { console.log("Notch detected, move shit around"); });和data-notch="true"添加到data-orientation="portrait|landscape"元素中，以允许您使用CSS调整布局：

<html>

希望这会有所帮助！

检测移动设备“缺口”

7 个答案: