适配处理iphoneX底部的横条

iphoneX手机取消了实体Home键，取而代之的是主界面底部不显眼的横条“Home Indicator”。当网页底部fixed 元素时候，一部分元素可能就被这个横条遮挡住，怎么适配解决呢？

第一步：

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

　　第二步：

　　　　页面主体内容限定在安全区域内,如果不设置这个值，可能存在小黑条遮挡页面最底部内容的情况

　　　　body { padding-bottom: env(safe-area-inset-bottom); }

　　第三步：

　　　　fixed 元素的适配　　

　　　　第一种：padding-bottom: env(safe-area-inset-bottom);
　　　　　　　　注意元素是否设置box-sizing:border-box;否则不起作用，道理就不说了。
　　　　第二种：height: calc(60px(假设值) + env(safe-area-inset-bottom));
　　　　第三种：margin-bottom: env(safe-area-inset-bottom);

　　　　这三种方式都可解决，视情况而定选择合适的，也可以灵活为fixed 元素的子元素添加这些属性

　　

　　使用 @supports
　　　　一般只希望 iPhoneX 才需要新增适配样式,可以配合 @supports 编写样式：
　　　　@supports (bottom: env(safe-area-inset-bottom)) {
　　　　　　div {
　　　　　　　　margin-bottom: env(safe-area-inset-bottom);
　　　　　　}
　　　　}

 

 

转自 http://www.manongjc.com/article/76141.html