How to disable page zoom in chrome

Question

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

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 ...

Take a look at this answer: https://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser it gives some insight on ways to prevent users from zooming in on different browsers — Ameer, Nov 12 '19 at 19:16
Try to take a look at this answer: https://stackoverflow.com/questions/49541173/how-to-prevent-default-handling-of-touch-events — 猫招き, Nov 12 '19 at 19:49

score 1 · Answer 1 · answered Nov 13 '19 at 00:23

1

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

answered Nov 13 '19 at 00:23

Jessica

46
6

score 1 · Accepted Answer · answered Nov 13 '19 at 10:49

1

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!

answered Nov 13 '19 at 10:49

Sara Ree

3,417
12
48

How to disable page zoom in chrome

2 Answers2