代码之家 › 专栏 › 技术社区 › Kerwen

iPad Chrome的高度错误

ipad google-chrome ios css html

0

Kerwen · 技术社区 · 2 年前

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;
}

1 回复 | 直到 2 年前

1

2

stax 2 年前

我想 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;
  }
}