Question

为什么这个简单的页面在Android设备上滚动？这不是预期的行为

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.el {
  margin: auto;
  font-size: 72px;
  font-family: 'Ubuntu', sans-serif;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
<title>Chad</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" 
</head>
<body>

<div class="container">
 <div class="el">Hi!</div>
</div>

</body>
</html>

＆＃13;

该页面不会在我的计算机上滚动，但出于某种原因，它会在我的Android手机上滚动。

Answer 1

Android浏览器搜索栏的 60px ，因此100vh + 60px等于......好吧，滚动条：）

如果你有一个使用行设置100vh的情况：

<!-- searchBar adds 60px -->

<body>
    <div class="row row-first"></div>
    <div class="row"></div>
</body>

这是移动优先方法

/* Default, mobile styles: */

.row {
  height: 100vh;
}

.row-first{
  height:  calc(100vh - 60px); /* minus search bar */
}

/* Overrides: */

@media only screen and (min-width: 768px){
  .row-first{
    height:  100vh;
  }
}

因为只有最上面的第一行最初会受到这种细微差别的影响。

为什么此页面会在Android设备上滚动？

1 个答案: