CODEWITHSUNDEEP
htmlcss
Sara Ree
Sara Ree

Reputation: 3543

How to disable page zoom in chrome

How to disable page zoom in my code? I mean zooming like this:

enter image description here

Note: I only want it to work in chrome.

Here is the code:

*{
  overflow: hidden;
}
.container {

   overflow: hidden;
  justify-content: center;
  align-items: center;
}

.number-ticker {
  position:absolute;
  overflow: hidden;
  top:0px;
  left:0px;
  color: #D9D9D9;
  font-size: 2em;
  font-family: Roboto Light;
  overflow: hidden;
  height: 1.1em;
  background-color: transparent;
}

.number-ticker .digit {
  overflow: hidden;
  float: left;
  line-height: 1;
  transition: margin-top 0.75s ease-in-out;
  text-align: center;
}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Number Ticker</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="number-ticker.css">
    </head>
    <body>
        <div class="container">
            <div class="number-ticker" data-value="10"></div>
        </div>

        <script src="number-ticker.js"></script>
    </body>
</html>

I have used these in HTML head with no success...

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>

and this one:

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

But unfortunately, it still zooms... !!! Am I missing something?

I have seen pages that don't zoom at all... So I know there should be a working way ...

Upvotes: 1

Views: 2796

Answers (2)

Sara Ree
Sara Ree

Reputation: 3543

For those who may encounter this annoying problem. you only need to use vh and vw in all of your sizes (fonts, elements, etc...) instead of px and em.... those units do not follow page zoom!

Upvotes: 1

Jessica
Jessica

Reputation: 66

I've had this problem before, too, and I think Chrome ignores "user-scalable=no" (at least on desktops).

Check out this answer: https://stackoverflow.com/a/49371150/12343443

Upvotes: 1

Related Questions