h5 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）

ゝ一世哀愁。 2021-12-11 11:17 763阅读 0赞

### iOS特性方法（推荐），小程序也可用 ###

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

# iOS特性方法完整源码示例 #

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>iOS安全区域</title>
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
      <style>
        .a{
          position: fixed;
          left: 0;
          bottom: 0;
          width: 100%;
          background-color: red;
          padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
          padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
        }
        .b{
          background-color: green;
          height: 100px;
        }
      </style>
    </head>
    
    <body>
      <div style="height: 1500px;">Safari浏览器滚动页面查看效果</div>
      <div class="a">
        <div class="b"></div>
      </div>
    </body>
    
    </html>

### 方法一：JS判断 ###

### 方法二：CSS媒体查询 ###

@media screen and (width: 375px) and (height: 812px){
        .button {
            padding-bottom: 34px;
        }
    }
    
    // 更多 iPhone X 系列其它尺寸请参照JS的尺寸写

小编推荐方法二，能在CSS中解决的事情，不要交给JS去处理。可能写的会更多一点，但不会存在渲染时元素突然上跳的感觉。

虽然实现了底部home键的兼容，但是在safari浏览器中，浏览器底部的操作栏会有显示和隐藏的切换，如何动态兼容呢？

请阅读小编的原创文章[《javascript iphoneX的safari浏览器操作栏隐藏时兼容底部home键》][javascript iphoneX_safari_home]  
文章地址：[https://blog.csdn.net/u013350495/article/details/99228848][javascript iphoneX_safari_home]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[javascript iphoneX_safari_home]: https://blog.csdn.net/u013350495/article/details/99228848
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211211/3d667954f5594a95bc5a58787f9d8640.png