iPad Chrome高度错误

pkbketx9 于 2023-09-28 发布在 Go

关注(0)|答案(1)|浏览(90)

iPad Pro（11英寸），iPadOS版本：16.6.1，Chrome版本：116.0.5845.177
我创建了一个简单的html，并尝试在iPad上运行。虽然我将高度设置为100vh，但右侧有一个垂直滚动条，我可以向下滚动到一个完全空白的页面。看起来总高度超过200vh。
网页在Safari上可以工作，但在iPad Chrome上不能工作。
网址：

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

google-chrome

来源：https://stackoverflow.com/questions/77086251/ipad-chrome-has-wrong-height

1条答案

按热度按时间

7uhlpewt1#

我认为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）回复(0）举报 2023-09-28

我来回答

iPad Chrome高度错误

1条答案

相关问题

热门标签

最新问答