100dvh 在 Android Chrome 全屏上延伸到底部

Question

我相信这是一个错误，但想确认一下......我也在寻找任何解决方法建议。

我有一个 html 页面 - 当我使用以下 css 时，会在全屏周围正确绘制红色边框。

（适用于桌面和移动设备）

html {
  border: 5px solid red;
  box-sizing: border-box !important;
  height: 100dvh;
}

但是，当我请求全屏模式（android chrome）时，页面延伸超过底部，底部的红色边框不再可见。 （触摸屏幕，将导致页面重新渲染，这解决了问题）。

这是一个最小的工作复制品（在 Android chrome 中打开） - https://jsbin.com/netiyud/8

代码在这里：https://jsbin.com/netiyud/edit?html,css,js,console,output

• 谁能重现这个吗？
• 这是一个错误吗？
• 有修复/解决方法吗？

软件：

• Chrome版本：116.0.5845.163
• 操作系统：Android 13

相关

• 如何让视口高度单位在 Android 上的 Chrome 中以全屏模式工作？

Answer 1

我会使用不同的 html 和正文样式。请测试一下，因为我无法重现您的问题。

function fullscreen() {
  if (typeof window === "undefined") {
    console.error('got here')
    return;
  }
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;

  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    // assume worked
    console.log('full')
    requestFullScreen.call(docEl);
    return true;
  } else {
    console.log('minimise')
    cancelFullScreen.call(doc);
    return false;
  }
};

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}
body {
    border: 5px solid red;
    box-sizing: border-box;
}

<button onclick="fullscreen()">Toggle fullscreen</button>