微信开发者工具版本:Stable v1.05.2111300
操作系统:macOS Monterey 12.0.1(21A559)
手机系统:iphonex 15.1
现象:扫码调试或者自动真机调试的时候,wev-view的html内部的固定的底部元素样式如下
#footerbar {
position: fixed;
left: 0;
bottom: 0;
width:100px;
height: 100px;
}
footerbar会看不到,因为在屏幕外部了,修改为
#footerbar {
position: fixed;
left: 0;
bottom: 88px; // 这里修改
width:100px;
height: 100px;
}
则正常显示。一旦断开真机调试,打开手机上的小程序则显示正常。
原因:
扫码或者自动编译,当且仅当连接微信工具调试的时候,webview的body的高度始终为屏幕的高度(包括了顶部的导航栏),导致底部的元素在屏幕外部。
备注:仅仅在扫码编译或者自动编译,真机调试的时候,一旦断开连接,退出调试模式,则正常显示。
小程序页面布局如下:
<view>
<web-view src="https://www.xxx.com"></web-view>
</view>
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)