收藏
回答

iPhone6微信小程序渲染H5页面高度偶现异常的问题如何解决?

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS ios12.5.7 iPhone 6 8.0.29

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;
}
最后一次编辑于  06-26
回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    06-25

    你好,请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    06-25
    有用
    回复 2
    • sphenginx
      sphenginx
      06-26
      这个我没有小程序的源码,我这边只负责H5页面开发,偶现小程序加载H5页面的时候会出线高度加载异常问题:有时候是整个屏幕的高度,有时候是去除小程序navbar 和 statusBar之后的高度, 和 https://developers.weixin.qq.com/community/develop/doc/00088eaf0f80f08f09208e05a66000 这个问题很像。。。
      06-26
      回复
    • sphenginx
      sphenginx
      06-26
      你可以看下上面的两张获取 window.innerHeight 高度的截图:异常时是667,正常时是603 ……
      06-26
      回复
  • sphenginx
    sphenginx
    06-25

    目前H5页面的解决方案是:

    1、判断页面的高度是否是屏幕高度;

    2、如果window.innerHeight是屏幕的高度,会动态设置 footerBar 的 bottom属性……

    06-25
    有用
    回复
登录 后发表内容