iPad Pro（11英寸），iPadOS版本：16.6.1，Chrome版本：116.0.5845.177
我创建了一个简单的 html 并尝试在 iPad 上运行。虽然我将高度设置为100vh，但右侧有一个垂直滚动条，我可以向下滚动到完全空白的页面。看起来总高度超过200vh。
该网页适用于 Safari，但不适用于 iPad chrome。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="background-color: green; height: 100%; width:100%;">This is a div</div>
</body>
</html>
CSS：
body {
height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: 100vh;
height: -webkit-fill-available;
}
我认为
min-height: -webkit-fill-available;你可以尝试：
body {
height: 100vh;
}
html {
height: 100vh;
}
如果问题仍然存在，您还可以尝试使用特定于浏览器的 CSS 属性专门针对 Chrome：
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Target Chrome on iOS */
body {
height: 100vh;
}
html {
height: 100vh;
}
}