[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/)