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. ; ?

好多人回答，這邊做一下補充吧。

viewport-fit

• contain
• cover
• auto

只有打開cover 配置，才開啟了 IPX 的全屏開關(guān)，默認(rèn)會有保護區(qū)域的

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

constant 函數(shù)

constant 目前的兼容性并不好，不建議使用。即使后期兼容性好了，依然會有舊版本 ios 系統(tǒng)，如11.1.1 存在，所以使用css media 匹配，匹配方案需要注意

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

@media only screen and (width: 812px) and (height: 375px) and (-webkit-device-pixel-ratio: 3) {
    /* 這代表IPX的橫屏模式 */
    /* 針對 IPX 橫屏單獨處理 */
}

如果想使用 JS 判斷，可以獲取 UA，根據(jù) 操作系統(tǒng)，像素比，屏幕寬高比等信息進(jìn)行綜合判斷，但獲取到的結(jié)果未必是準(zhǔn)確的。

看到一篇關(guān)于 解決iPhoneX適配的文章： https://mp.weixin.qq.com/s?__...

親測這個其實是針對 ios11系統(tǒng)有效。

1.設(shè)置網(wǎng)頁在可視窗口的布局方式。
首先 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.頁面主體內(nèi)容限定在安全區(qū)域內(nèi)。
可以配合 @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){
    //如果以后出現(xiàn)375*812,非ios機型，可以加上下面語句
    @supports (bottom: constant(safe-area-inset-bottom)) {
        
    }
}

(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!');
  }
})();

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio:3) {
    
}
//js的話  根據(jù)這句媒體查詢 判斷設(shè)備寬高以及設(shè)備dpi就可以了

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