html - 如何在 Chrome 中禁用页面缩放

标签 html css

如何在我的代码中禁用页面缩放?我的意思是像这样缩放:

enter image description here

注意:我只希望它在 chrome 中工作。

代码如下:

*{
  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>

我在 HTML head 中使用了这些但没有成功...

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

还有这个:

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

但不幸的是,它仍然缩放...!!!我错过了什么吗?

我看到过根本无法缩放的页面...所以我知道应该有一种工作方式...

最佳答案

我以前也遇到过这个问题,我认为 Chrome 会忽略“user-scalable=no”(至少在台式机上是这样)。

看看这个答案: https://stackoverflow.com/a/49371150/12343443

关于html - 如何在 Chrome 中禁用页面缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58825229/

相关文章:

javascript - 如何在chrome浏览器中播放本地视频文件?

html - 将全宽 slider 或图像添加到 Twitter Bootstrap 主题时出现问题

php - 动态 CSS 类 jQuery

html - 如何发送 HTML 电子邮件

html - 如何在 CSS 中创建 flex 和重叠的菜单选项卡

javascript - Chrome 自动填充在我的 JS 之后执行

css - 带有文本的图像悬停叠加 - 文本位置

HTML 表单 - 在您看来,它们应该如何完成以及为什么? (<div> 与 <p>)

html - Firefox 和 Chrome 中的图像差异

javascript, float 和显示不工作