屏幕尺寸在竖直方向，iPhoneX的显示宽度与iPhone6、iPhone7和iPhone8的4.7英寸相同，但比4.7英寸高出145pt展示。安全区安全区是指一个可见窗口的范围，安全区内的内容不受圆角（corners）、直刘海（sensorhousing）、小黑条（HomeIndicator）viewport-fitthroughmetatagviewportExtension，可以调整页面的显示区域。viewport-fit有三个可选值：contain：使页面显示在安全区域。封面：使页面充满屏幕。auto：同contain选项，iOS11新特性，Webkit的一个CSS函数，用于设置安全区域到边框的距离，有四个预定义变量：safe-area-inset-left：距离安全区与左边界的距离safe-area-inset-right:安全区到右边界的距离safe-area-inset-top:安全区到上边界的距离safe-area-inset-bottom:safearea到bottomborder的距离env()和constant()因为之前使用的constant已经废弃了，我们需要向后兼容：padding-bottom:constant(safe-area-inset-bottom);/*兼容iOS<11.2*/padding-bottom:env(safe-area-inset-bottom);/*兼容iOS>=11.2*/适配1.设置网页在可见窗口的布局，使页面完全覆盖整个窗口env()只能在viewport-fit=cover设置时使用。2.页面主要内容仅限于安全区域body{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);}3.fixed元素的适配如果元素是fixed定位且bottom=0，设置body的padding-bottom是不够的，还需要给自己加上padding，因为它是相对于bottom的bottom定位的屏幕。{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);}或者用计算函数calc覆盖原来的高度：{height:calc(60px(assumedvalue)+constant(safe-area-inset-bottom));height:calc(60px(假设值)+env(safe-area-inset-bottom));}注意这个方案要求吸底条必须有背景色是的，因为extension的部分背景是跟在外容器上的，否则会出现空心的情况。如果元素是固定的，bottom不等于0，调整位置，增加margin-bottom或者改变bottom即可。参考网站适配iPhoneX，就这么简单DesigningWebsitesforiPhoneXHumanInterfaceGuidelines
