微信升级到 8.0.64 后,对应基础库版本 3.11.0,WebView 内打开外部网页,页面内执行 screen.height === window.innerHeight 的值为 true, 正常情况下不应该是 true, 因为屏幕的高度不等于视口的高度。这会导致页面布局错乱,影响基于视口高度的布局、fixed 定位等。
安卓端升级到微信 8.0.64 无此问题,测试了两台升级到 8.0.64 的 iPhone 手机: iPhone 16 Pro Max,iOS 18.x 和 iPhone 12,iOS 17.x 均出现了这个问题。
// 微信内打开网页
<web-view src="http://localhost:5500/dev.html"></web-view>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
alert(screen.height === window.innerHeight);
</script>
</body>
</html>
下面在小程序内打开钉钉官网,第一张是在微信内直接打开,第二张是在小程序内打开,可以看到在小程序内打开的网页底部的按钮不见了,而底部的按钮正是基于视口的 fixed 定位。
