怎么判断 iphoneX 手机？

Question

要兼容 iosX，需判断手机类型，怎么判断？

ios真的会搞事情！

Answer 1

看到一篇关于 解决iPhoneX适配的文章： https://mp.weixin.qq.com/s?__...

亲测这个其实是针对 ios11系统有效。

1.设置网页在可视窗口的布局方式。
首先 meta里 添加 viewport-fit=cover

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />

2.页面主体内容限定在安全区域内。
可以配合 @supports 这样编写样式：

@supports (bottom: constant(safe-area-inset-bottom)) {
  div {
    margin-bottom: constant(safe-area-inset-bottom);
  }
}

更好的解决方式可以采用媒体查询 ，再加上面的代码 。

@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3){
    //如果以后出现375*812,非ios机型，可以加上下面语句
    @supports (bottom: constant(safe-area-inset-bottom)) {
        
    }
}

Answer 2

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio:3) {
    
}
//js的话  根据这句媒体查询 判断设备宽高以及设备dpi就可以了

Answer 3

好多人回答，这边做一下补充吧。

viewport-fit

• contain
• cover
• auto

只有打开cover 配置，才开启了 IPX 的全屏开关，默认会有保护区域的

<meta name="viewport" content="viewport-fit=cover" />

constant 函数

constant 目前的兼容性并不好，不建议使用。即使后期兼容性好了，依然会有旧版本 ios 系统，如11.1.1 存在，所以使用css media 匹配，匹配方案需要注意

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    /* 这代表IPX */
    /* 目前这种设备像素比 和 尺寸是很“奇葩”、特殊的，基本可以确定是 IPX */
}

@media only screen and (width: 812px) and (height: 375px) and (-webkit-device-pixel-ratio: 3) {
    /* 这代表IPX的横屏模式 */
    /* 针对 IPX 横屏单独处理 */
}

如果想使用 JS 判断，可以获取 UA，根据 操作系统，像素比，屏幕宽高比等信息进行综合判断，但获取到的结果未必是准确的。

Answer 4

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/(i¹+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android：'+isAndroid);
alert('是否是iOS：'+isiOS);

---

1. ; ↩

Answer 5

if(/os\s+(\d+)/i.test(navigator.userAgent)){
    // IOS code
}

Answer 6

(function(){
  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) {
    alert('iPhoneX Detected!');
  }
})();