欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

全屏& quot主屏幕& quotAndroid手機上的web app在Chrome中有48px溢出；怎么修？

CSS
老白2年前9瀏覽0評論

我正在為使用Chrome的Android手機開發全屏網絡應用程序(PWA)。我添加了一個webmanifest文件，它的display屬性設置為fullscreen。然而，當我從主屏幕打開應用程序時，會出現持續的48px溢出，即使是在空白頁面上。

我嘗試過將html和正文高度設置為100%，將溢出設置為隱藏，以及其他各種CSS和JavaScript解決方案(如使用window.visualViewport.height)，但溢出仍然存在。

這是我目前的設置:

超文本標記語言

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Fullscreen Web App</title>
</head>
<body>
</body>
</html>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
}

* {
  box-sizing: border-box;
}

JavaScript(使用window.visualViewport.height):

function setViewportHeight() {
  const viewportHeight = window.visualViewport.height;
  document.documentElement.style.height = `${viewportHeight}px`;
  document.body.style.height = `${viewportHeight}px`;
}

window.addEventListener('load', setViewportHeight);
window.addEventListener('resize', setViewportHeight);
window.addEventListener('orientationchange', setViewportHeight);

48px的溢出仍然存在，即使我將body和html height設置為一個較小的值，比如20px。我如何消除這種溢出，并確保我的全屏網絡應用程序在使用Chrome的Android手機上正確顯示？

此外，雖然我第一次遇到這個問題是在Zebra掃描儀上，但它發生在每個Android設備上。然而，在iOS設備上不會出現這個問題。

我也有同樣的問題。

而且我們并不孤單:Chrome-Mobile PWA全屏:應用區域Exeeds HTML高度

可能是chrome的bug，我的chrome版本是113.0.5672.162。

如果有人找到了解決方案，請提供幫助