收藏
回答

微信基础库 3.11.0 WebView 组件内嵌的网页获取到的视口高度异常?

微信升级到 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 定位。

最后一次编辑于  2025-10-24
回答关注问题邀请回答
收藏

1 个回答

  • 智能回答 智能回答 本次回答由AI生成
    2025-10-24
    有用
登录 后发表内容