检测移动设备"缺口"

Question

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

我想知道是否有或可能是以某种方式在Javascript中检测到这种情况.

有趣的是,Chris Coyier写了一篇关于"Notch"和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-notices-environment-variables-env-in-javascript-from-css/

Answer 2

这可能有点hacky,然而,获得屏幕可用的高度和宽度并将它们与此规范相匹配将允许我们确定它是否是iPhone X.

请注意

在纵向方向,在iPhone上X上的显示器的宽度的4.7" 的宽度相匹配的iPhone 6,iPhone 7,和iPhone 8. 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规格

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

假设你有一个固定位置标题栏,你的iOS 10的CSS目前看起来像这样:

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

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

要为iPhone X和其他iOS 11设备自动调整,您可以在viewport元标记中添加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()表达式中使用常量.

文章

Answer 3

由于@youssef-makboul 的回答以及@hjellek 的评论，iOS 已从constant() 更改为env() 语法，并且需要回退以在所有当前的iPhone X iOS 版本上支持这种方法。

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

// 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;
  }