如何在h5和小程序中适配iphoneX及更高版本全面屏底部的安全区_iphone 手机网页底部适配

作者：AllinToyou | 2024-03-16 12:33:15

踩

iphone 手机网页底部适配

关键词 IOS

前言

在项目开发的过程中，需要IOS全面屏底部安全区适配

步骤

h5需要设置页面属性：

 <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
1
2

2.在body添加如下属性

 body {
    padding-bottom:constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  }
1
2
3
4

后言

最近工作很忙，没有时间更新。希望本文会对你有所帮助，如果有什么问题，可在下方留言沟通

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/249498