目前H5页面的解决方案是: 1、小程序的webview加载H5页面的时候会传递 navbar 和 statusBar的高度; 2、H5页面判断页面的高度是否是屏幕高度(https://uiiiuiii.com/screen/); 3、如果window.innerHeight是屏幕的高度,会动态设置 footerBar 的 bottom属性为 statusBar 和 navbar的高度……
小程序首次打开 webview 页,页面高度异常,底部被截取复现步骤: 将 web-view 那一页作为分享页,分享出去,web-view src 有个动态参数,比如 http://xyz.com?token=${token}用户删除该小程序,点击分享页进入(第一次进入小程序)进入分享页,跳转授权登录;登录获取 token 直接返回web-view 页打开,高度异常,底部被截取一段距离(估计与导航相关)这时任何页面跳转都存在问题。重新进入便正常了操作视频:https://img.souche.com/bolt/9ki4SFWU26gZa2YJufZcJ/RPReplay_Final1691142288.MP4 注:与html 布局与样式无关,使用其它第三方网站 页面一样存在问题 首次进入异常页面: [图片] 正常页面: [图片] bing.com 底部按钮被遮挡 [图片] baidu.com 百度底部被遮挡 [图片]
2024-06-25目前H5页面的解决方案是: 1、判断页面的高度是否是屏幕高度; 2、如果window.innerHeight是屏幕的高度,会动态设置 footerBar 的 bottom属性……
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; }
2024-06-25https://www.v2ex.com/t/468565 这里说是根据referer来识别的,ios系统的Safari浏览器 打开微信回调页面会 丢失 referer 信息…… 也会导致这个问题
授权入口页所在域名:空微信第三方平台引入用户进入授权页时 方式一:授权注册页面扫码授权, 将授权链接生成二维码扫码后, 如图错误提示, 而 方式二:点击移动端链接快速授权 是可以正常授权的.请问是什么原因?, 文档中也没有任何说明!!!谢谢!!!![图片]
2020-12-04