在H5
上的解决方案
使用苹果官方推出的适配方案Css
函数env()
和constant()
-
设置
viewport
设置为cover
,这样这两个函数才能生效<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
-
用
@support
隔离兼容样式,当浏览器支持bottom: constant(safe-area-inset-bottom)
或者bottom: env(safe-area-inset-bottom)
的时候,bottom-button
类就会新增margin-bottom
的样式@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { .bottom-button { margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom); } }
更多小程序以及H5的适配方案参考博文:https://www.jb51.net/html5/719525.html