iphonex上线有段时间了，作为业界首款刘海屏机型，全面屏无法正常显示，所以需要适配iphonx，下面会详细说说如何适配，先看一张适配前后图：iphonex提供的metaheadercontain可视化窗口完全包含网页内容覆盖网页内容完全覆盖默认值auto，同contain=contain一样，需要适配iPhoneX必须设置viewport-fit=cover，这是适配的关键步骤。ios11增加新特性，webkit的css功能为了应对刘海屏，苹果也给出了响应策略css预定义变量四个预定义变量是设置安全区域到边界的距离，如下：safe-area-inset-left:安全区域到左边界的距离safe-area-inset-right:安全区域到右边界的距离safe-area-inset-top:安全区域到上边界的距离safe-area-inset-bottom：安全区域到底部边框的距离safe-area-inset-left一般为0safe-area-inset-right一般为0safe-area-inset-top刘海全屏时top为44pxsafe-area-inset-bottom是刘海全屏时的34pxcss函数env()和constant()函数都是webkit中的css函数，变量函数可以直接使用。env函数仅在webkit内核下被支持。ios>=11.2必须支持常量函数。ios<11.2必须支持env()iOS11中附带的名为con的函数stant().从SafariTechnologyPreview41和iOS11.2beta开始，constant()已被删除并替换为env()。如有必要，您可以使用CSS后备机制来支持这两个版本，但以后应该更喜欢env()。兼容前后版本代码padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top);见下图：兼容代码写在下面scss.phonex{padding-top:constant(safe-area-inset-top);//导航栏+状态栏的高度为88pxpadding-top:env(safe-area-inset-top);//导航栏+状态栏的高度为88pxpadding-left:constant(safe-area-inset-left);//0如果不是垂直padding-left:env(safe-area-inset-left);//0padding-如果不是垂直向右：constant(safe-area-inset-right);//0padding-right:env(safe-area-inset-right);//0padding-bottomifnotvertical:constant(safe-area-inset-bottom);//底部圆弧高度为34pxpadding-bottom:env(safe-area-inset-bottom);//底部圆弧高度为34px}完成检测代码@支持隔离兼容模式@mixiniphonex-css{padding-top:constant(safe-area-inset-top);//导航栏+状态栏的高度为88pxpadding-top:环境（安全区域插入顶部）；//导航栏+状态栏的高度为88pxpadding-left:constant(safe-area-inset-left);//0padding-left如果屏幕不是垂直的：env(safe-area-inset-left);//0padding-right:constant(safe-area-inset-right);//0padding-right:env(safe-area-inset-right);//如果屏幕不是垂直的，则为0padding-bottom:constant(safe-area-inset-bottom);//底部圆弧高度为34pxpadding-bottom:env(safe-area-inset-bottom);//底部圆弧高度为34px}@mixiniphonex-support{@supports(bottom:constant(safe-area-inset-top))or(bottom:env(safe-area-inset-top)){body.iphonex{@includeiphonex-css;}}}使用@mediamediaquery@mixiniphonex-css{padding-top:constant(safe-area-inset-top);//对于导航栏+状态栏的高度为88pxpadding-top:env(safe-area-inset-top);//导航栏+状态栏的高度为88pxpadding-left:constant(safe-area-inset-left);//如果不是Padding-left:env(safe-area-inset-left);//0如果不是垂直padding-right:constant(safe-area-inset-right);//如果不是垂直0padding-right:env(safe-area-inset-right);//0填充如果不是垂直的-底部：常量（安全区域插入底部）；//底部圆弧高度为34pxpadding-bottom:env(safe-area-inset-bottom);//底部圆弧高度为34px}//iphonex适配@mixiniphonex-media{@mediaonlyscreenand(device-width:375px)and(device-height:812px)and(-webkit-device-pixel-比率：3）{body.iphonex{@includeiphonex-css;}}}最后，env和constant只有在viewport-fit=cover时才能生效，上面使用的safariconsole可以在模拟器中检测网页，打开webinspector。https://webkit.org/blog/7929/...>https://aotu.io/notes/2017/11...
