css 微信h5踩坑

 1. 微信环境下长按识别二维码不能将二维码图片作为div的背景，要用img标签才可以识别。

 

2. 移动端微信h5使用rem为单位、flex布局时，使用position: relative定位在ios和安卓下会出现位置不一致，要改为px单位，如果有更好的办法欢迎评论。

 

3. 处理底部安全距离

// 在index.html中加上viewport-fit=cover" 否则微信h5不生效
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" name="viewport" />

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    .footerTab {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
// .footerTab 底部元素的类名