我正在使用 Chrome 为 Android 手机开发全屏网络应用程序 (PWA)。我添加了一个 webmanifest 文件，并将显示属性设置为全屏。但是，当我从主屏幕打开应用程序时，即使在空白页面上，也会出现持续的 48 像素溢出。
我尝试过将 html 和 body 高度设置为 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>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
}
* {
box-sizing: border-box;
}
window.visualViewport.heightfunction 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);
即使我将 body 和 html 高度设置为较小的值（例如 20px），48px 溢出仍然存在。如何消除这种溢出并确保我的全屏网络应用程序在使用 Chrome 的 Android 手机上正确显示？
此外，虽然我第一次遇到这个问题是在 Zebra 扫描仪上，但它发生在每台 Android 设备上。但此问题在 iOS 设备上不会出现。
该问题最近已得到解决，从 Chrome 版本 119.0.6006.0 开始，该问题已不再存在。
有关更多信息，请参阅
主要的 chromium 问题以及相关问题。