[TOC] 注意：網頁默認不添加擴展的表現是 `viewport-fit=contain`，需要適配 iPhoneX 必須設置 `viewport-fit=cover`，這是適配的關鍵步驟。 # css `constant()` 在 iOS11.2 之后就不能使用的，但我們還是需要做向后兼容，像這樣： ```css padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ ``` 注意：`env()` 跟 `constant()` 需要同時存在，而且順序不能換。 # JS 有些接口必須用 js 去處理，不能用 css 樣式實現，那么就可以這樣做 ```js if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ ? ? ? ? $(".phonex-pb").css("padding-bottom","34px"); } ``` ```js function isIPhoneX(fn){ let u = navigator.userAgent; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios 系統 if (isIOS) { if (screen.height == 812 && screen.width == 375){ //是iphoneX }else{ //不是iphoneX } } } ``` # 參考 [適配 iPhoneX](https://aotu.io/notes/2017/11/27/iphonex/)