iPhone6微信小程序渲染H5页面高度偶现异常的问题如何解决？
webview渲染H5页面的高度偶现异常（以下window.height 都是通过 window.innerHeight 属性获取的）： iPhone6的屏幕高度是 667，正常情况下小程序渲染的H5页面 高度 是不包含小程序的navbar 和 statusBar的高度的，即 603， 此时底部footerBar是正常渲染的…… [图片] [图片] 但是异常的时候，小程序渲染的H5高度是 667，导致底部footerBar元素出现定位向下偏移了…… [图片] [图片] footerBar相关的样式如下： .footerBar {
position: fixed;
background: #fafafa;
width: 100%;
height: 98px;
left: 0;
right: 0;
bottom: 0;
padding: 12px 0;
@supports ((height: constant(safe-area-inset-bottom)) or (height: env(safe-area-inset-bottom))) {
height: calc(constant(safe-area-inset-bottom) + 86px);
height: calc(env(safe-area-inset-bottom) + 86px);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
display: flex;
align-items: center;
justify-content: center;
border-top: 0.5px solid #eee;
transform: translateY(0) translateZ(0);
z-index: 999;
& > div {
flex: 1;
}
}
通用布局： /* 禁止iOS弹性滚动 */
html,
body,
#root {
width: 100vw;
height: 100vh;
overflow: hidden;
background: #f7f7f7;
}
#root {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.container {
/* position: absolute;
top: 0;
left: 0; */
width: 100vw;
height: 100vh;
overflow: auto;
background: #f7f7f7;
-webkit-overflow-scrolling: touch;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
font-family: PingFangSC, PingFangSC-Regular, sans-serif;
}
