检测屏幕是否具有Notch / Cutout Web JS

时间:2018-12-13 09:33:24

标签: javascript android ios screen

我正在寻找跨浏览器跨平台,以检查屏幕是否有缺口/切口,当只有Apple时它不是问题,但现在在2018年,很多手机都在使用Android也有这个“东西”,我已经花了几天的时间来寻找解决方案,但到目前为止没有任何事情……

我的问题是-是否可以使用JS检查用户设备/屏幕是否具有切口/缺口或仅仅是“常规形状”屏幕?

浏览器能做到这一点吗?

也许有人对此主题有自己的想法,我会很高兴听到他们的想法。

现在,对于iPhone X检测,我使用以下方法:

(function(window){

  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  var ratio = window.devicePixelRatio || 1;
  var screen = {
    width : window.screen.width * ratio,
    height : window.screen.height * ratio
  };

  if (iOS && screen.width == 1125 && screen.height === 2436) {

    window.iphoneX = true;

    window.addEventListener('orientationchange', update);
    update();
  }

  function update() {
    notch();
    iphoneXChecker();
  }

  function notch() {

    var _notch = '';

    if( 'orientation' in window ) {
      if (window.orientation == 90) {
        _notch = 'left';
      } else if (window.orientation == -90) {
        _notch = 'right';
      }
    } else if ( 'orientation' in window.screen ) {
      if( screen.orientation.type === 'landscape-primary') {
        _notch = 'left';
      } else if( screen.orientation.type === 'landscape-secondary') {
        _notch = 'right';
      }
    } else if( 'mozOrientation' in window.screen ) {
      if( screen.mozOrientation === 'landscape-primary') {
        _notch = 'left';
      } else if( screen.mozOrientation === 'landscape-secondary') {
        _notch = 'right';
      }
    }

    window.notch = _notch;
  }

})(window);

代码积分@Mark Notton

0 个答案:

没有答案