提问人：Kerwen 提问时间：9/12/2023 更新时间：9/12/2023 访问量：33
iPad Chrome 的高度错误
iPad Chrome has wrong height
问：
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;
}
答：
2赞
stax
9/12/2023
#1
我认为可能是导致这个问题的原因。min-height: -webkit-fill-available;
您可以尝试：
body {
height: 100vh;
}
html {
height: 100vh;
}
如果这不起作用，请尝试使用height: 100%;
body {
height: 100%;
}
html {
height: 100%;
}
如果问题仍然存在，您还可以尝试使用特定于浏览器的 CSS 属性来专门定位 Chrome：
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Target Chrome on iOS */
body {
height: 100vh;
}
html {
height: 100vh;
}
}
评论
0赞
Kerwen
9/12/2023
感谢您的回复。但是我尝试了所有三个选项，没有一个有效
0赞
stax
9/12/2023
平板电脑上的确切屏幕分辨率是多少？
0赞
Kerwen
9/12/2023
2388 x 1668 像素分辨率，每英寸 264 像素 （ppi） 从 support.apple.com/kb/SP843?locale=en_US 获取此信息
0赞
stax
9/12/2023
请在此处尝试此代码。我重新构建了您的整个 html 页面。也许这会有所帮助！
0赞
Kerwen
9/12/2023
清除所有浏览数据后，它就可以工作了。韦里德...感谢您的帮助
评论