本文介绍了如何解决H5页面在iPhoneX上的适配问题，重点在于安全区域、viewport-fit和env函数的使用，以及针对底部fixed元素的两种不同情况的适配步骤，帮助开发者实现完美适配。
H5页面适配 iPhoneX
iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。
笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图：
关于适配的几个知识点
1、安全区域（Safe area ）
确保不会被设备圆角(corners)，传感器外壳(sensor housing，齐刘海) 以及底部的 Home Indicator 遮挡。下图的蓝色区域为安全区域。
也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。
viewport-fit
iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗
最低0.47元/天 解锁文章
扫一扫
2318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
