H5适配iphoneX底部留白问题_前端技术

资料来源：网络整理时间：2023/3/4 1:05:35 共计：3579 浏览

1、首先，给viewport meta 标签添加一个扩展viewport-fit，用于设置网页在手机的可视窗口的布局方式
　　属性值有：contain 视窗包含网页
　　　　　　　cover 网页覆盖视窗
　　　　　　　auto 默认值，同contain效果
注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤

2、env() 和 constant()

ios新增特性函数，用于设置安全区域与边界的距离，有四个值

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

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
底部兼容只需设置bottom边距即可
注意：env() 跟 constant() 需要同时存在，而且顺序不能换。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：纯CSS实现自适应浏览器宽度的正方形_CSS学习 | ·下一条：echo图片延迟加载js_前端技术