手机网页键盘弹出处理,微信浏览器网页安全区域适配

手机网页键盘弹出处理

在index.html中的meta标签添加一个id

    <meta id="添加的ID" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">

之后在main.js内

const initViewport = function (height) {
    const metaEl = document.querySelector("#添加的ID");
    const content = "height=" + height + ",width=device-width,initial-scale=1.0,user-scalable=no";
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', content);
};
const realHeight = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight;
initViewport(realHeight);

微信浏览器网页安全区域适配
根元素样式加上

    height: calc(100vh - env(safe-area-inset-bottom));

适用于X以后