检测移动设备“缺口”。 [英] Detecting mobile device "notch"

问题描述

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

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

有趣的是，Chris Coyier撰写了一篇关于

因此，首先，您要通过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解决方案，我昨天发现了一篇有趣的文章，可能有用吗

< blockquote>

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

  header {
 position：fixed; 
 top：0; 
左：0; 
右：0; 
身高：44px; 
 
 padding-top：20px; / *状态栏高度* / 
} 
  

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

  header {
 / * ... * / 
 
 / * iOS 10 * / 
填充顶部的状态栏高度：20px; 
 
 / * iOS 11+上的状态栏高度* / 
 padding-top：constant（safe-area-inset-top）; 
} 
  

保持后备价值非常重要
的旧设备不知道如何解释constant（）语法。您还可以在CSS calc（）表达式中使用
常量。

文章

With the launch of the iPhone X imminent, I'm trying to get ahead of the game and prepare some of my web applications to handle any design changes - the biggest of which being the new "notch" which houses the front camera.

I was wondering whether there is, or likely to be, any way of detecting this in Javascript somehow.

Interestingly, Chris Coyier has written an article about The "Notch" and CSS which led me to discover the safe-area-inset-right constant. Is there any way this can be accessed in Javascript and is this a reliable test.

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

解决方案

This might be a little hacky however, obtaining the screen available heights and widths and matching them to this specifications would allow us to determine if it is an iPhone X.

Please note

In portrait orientation, the width of the display on iPhone X matches the width of the 4.7" displays of iPhone 6, iPhone 7, and iPhone 8. The display on iPhone X, however, is 145pt taller than a 4.7" display...

So, firstly, you want to check if it is an iPhone via the userAgent, secondly you would check the area of the actual screen (excluding the orientation which defaults to portrait), lastly, once we know that it is an iPhoneX via it's screen dimensions you can determine the orientation (based on the table under the iPhone X diagram above)

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

References:

avilHeight

avilWidth

iPhoneX Specs

As for CSS solution, I have found an interesting article about it yesterday which might be of use

Let’s say you have a fixed position header bar, and your CSS for iOS 10 currently looks like this:

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

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

To make that adjust automatically for iPhone X and other iOS 11 devices, you would add a viewport-fit=cover option to your viewport meta tag, and change the CSS to reference the constant:

header {
    /* ... */

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

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

It’s important to keep the fallback value there for older devices that won’t know how to interpret the constant() syntax. You can also use constants in CSS calc() expressions.

Article

这篇关于检测移动设备“缺口”。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！