调试ios

• 手机 ->设置->Safari ->高级->JavaScript 打开、Web检查器 打开
• ios手机数据线连接电脑
• 在Mac上打开Safari： Safari->偏好设置->选择 “在菜单栏中显示“开发””选项.
• Safari->开发

iPhone安全距离适配

注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

• contain: 可视窗口完全包含网页内容（左图）
• cover：网页内容完全覆盖可视窗口（右图）
• auto：默认值，跟 contain 表现一致

新增 viewport-fit 属性

使得页面内容完全覆盖整个窗口

   <meta name="viewport" content="width=device-width, viewport-fit=cover">

页面主体内容限定在安全区域内

这一步根据实际页面场景选择，如果不设置这个值，可能存在小黑条遮挡页面最底部内容的情况。

body {

padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ 
padding-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

}

第三步：fixed 元素的适配

也可以设置固定高度，或者对特定元素padding-bottom进行修正

{ 
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom)); 
}

注意，这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。