3

在开发全屏应用程序时，我意识到基于铬的三星互联网浏览器报告的视口高度不一致（无论是使用window.innerHeight还是document.documentElement.clientHeight）。不一致源于第一页加载与后续加载。

  • 当页面首次加载到设备上时，报告的视口高度比实际高大约 96 像素。那是因为浏览器认为它是可滚动的，滚动触发的“最小 UI”会产生一个比第一次加载时高 96px 的可视视口。
  • 同一页面的后续刷新将报告“正确的”视觉视口高度。

这是一个说明问题的 gif：

三星互联网浏览器中视口高度报告不一致

在上面的 gif 中，我在可视视口底部放置了一个红色框。它仅在刷新后可见，因为那是正确报告视觉视口高度的时候。

我可以在所有 Galaxy S 系列设备上重现此问题，只要它们运行 9.0.01.80 的浏览器，并且高度差一致为 96px。

三星互联网浏览器报告的视口高度不一致的列表结果

可以在 GitHub pages repo 上访问相同的测试页面：https ://terrymun.github.io/viewport-height-test/

页面的快速设置如下：

CSS：

* {
  box-sizing: border-box;
}

html,
body {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  height: 100vh;
}

HTML：

<!doctype html>
<html>

<head>
  <title>Samsung Internet Browser Viewport Height test</title>
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, minimal-ui, viewport-fit=cover">

</head>

<body>

  <textarea id="vh" readonly></textarea>

  <h2>Filler text</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut augue condimentum, tincidunt arcu id, condimentum lectus. Fusce varius nibh in purus mollis, sed tempus enim tincidunt. Nam ullamcorper eu eros a feugiat. Suspendisse condimentum id urna
    vitae pulvinar. Ut blandit augue libero, a tempor neque aliquet in. Fusce lorem justo, tristique ut blandit non, porttitor ac urna. In imperdiet eget enim in consectetur. Mauris vestibulum est id erat facilisis efficitur. Suspendisse efficitur elit
    mi, et finibus turpis luctus ac.
  </p>
  <!-- <p> element is repeated until viewport is filled to at least 100vh -->

  <script>
      <!-- Reported value is always wrong on first page load -->
      document.querySelector('#vh').value = window.innerHeight;
  </script>

</body>

</html>
4

0 回答 0