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;
}
你好,请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
目前H5页面的解决方案是:
1、判断页面的高度是否是屏幕高度;
2、如果window.innerHeight是屏幕的高度,会动态设置 footerBar 的 bottom属性……