我正在使用Chrome为Android手机开发全屏Web应用程序（PWA）。我添加了一个webmanifest文件，显示属性设置为全屏。然而，当我从主屏幕打开应用程序时，即使在空页面上，也会出现持续的48px溢出。
我尝试过将html和body height设置为100%，并将overflow设置为hidden，以及其他各种CSS和JavaScript解决方案（例如使用window.visualViewport.height），但溢出仍然存在。
以下是我目前的设置：
HTML
<!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>CSS
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。如何消除这种溢出并确保我的全屏Web应用程序在使用Chrome的Android手机上正确显示？
此外，虽然我第一次遇到这个问题是在Zebra扫描仪上，但它发生在每个Android设备上。但是，这个问题在iOS设备上不会发生。
1条答案
按热度按时间68bkxrlz1#
我也有同样的问题。
我们并不孤单：Chrome-Mobile PWA Fullscreen: App Area Exeeds HTML Height
这可能是一个Chrome bug，我的Chrome版本是113.0.5672.162。
如果有人找到了解决办法，帮帮忙