0

I have the following page where I added the css:

body{
   height:100%;
   overflow:hidden;
}

which stops the page from moving up and down on a mobile device. However, when I focus on one of the inputs the page can then move around (up and down). How do I prevent that?

body {
  height: 100%;
  overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Login</title>

</head>

<body>
  <div class='container'>
    <form>
      <input type='text'>
    </form>
  </div>

</body>

</html>
DCR
  • 14,737
  • 12
  • 52
  • 115

1 Answers1

-1

Use this:

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

I noticed, you already have it set. But I had the same problem and it was because my meta tag at first didn’t have it initially and when I did implement it, it was messy. I cleaned it up, as above and now it works. In my case I didn’t like the x-overflow on mobile. Credit to this article where it states setting the user-scalable =no. That is the source of your problem.

How to prevent zooming and moving page on mobile browsers?

D Web Designer
  • 1
  • 1