CODEWITHSUNDEEP
htmlcss
Literate Goggles
Literate Goggles

Reputation: 378

Why does this page scroll on Android devices?

Why does this simple page scroll on an Android device? It's not the expected behavior

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.el {
  margin: auto;
  font-size: 72px;
  font-family: 'Ubuntu', sans-serif;
}
<!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>

The page does not scroll on my computer, but for some reason it scrolls on my Android phone.

Upvotes: 2

Views: 79

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

Android has 60px for the browser search bar, so 100vh + 60px equals to ... well, scrollbars :)

if you have a case where you use rows set a 100vh:

<!-- searchBar adds 60px -->

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

And here's a mobile-first approach

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

since only the first most upper row will be initially most affected by such nuance.

Upvotes: 1

Related Questions