H5常见问题及解决方案手册，【一篇文章搞懂】

我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压 absolute 和 fixed 定位的元素。导致可视区域变小，布局错乱。

原理与解决方案

软键盘将页面顶起来的解决方案，主要是通过监听页面高度变化，强制恢复成弹出前的高度。

// 记录原有的视口高度

const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;

window.onresize = function(){

var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;

if(resizeHeight < originalHeight ){

// 恢复内容区域高度

// const container = document.getElementById(“container”)

// 例如 container.style.height = originalHeight;

}

}

键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。

兼容原理，1.判断版本类型 2.更改滚动的可视区域

const isWechat = window.navigator.userAgent.match(/MicroMessenger/([\d.]+)/i);

if (!isWechat) return;

const wechatVersion = wechatInfo[1];

const version = (navigator.appVersion).match(/OS (\d+)(\d+)?(\d+)?/);

// 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口

if (+wechatVersion.replace(/./g, ‘’) >= 674 && +version[1] >= 12) {

window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));

}

window.scrollTo(x-coord, y-coord)，其中window.scrollTo(0, clientHeight)恢复成原来的视口

iPhone X系列安全区域适配问题

---

表现

头部刘海两侧区域或者底部区域，出现刘海遮挡文字，或者呈现黑底或白底空白区域。

产生原因

iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。

解决方案

设置安全区域，填充危险区域，危险区域不做操作和内容展示。

危险区域指头部不规则区域，底部横条区域，左右触发区域。

具体操作为：viewport-fit meta 标签设置为 cover，获取所有区域填充。判断设备是否属于 iPhone X，给头部底部增加适配层

viewport-fit 有 3 个值分别为：

• auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。

• contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。

• cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。