Question

我的目标是class =＆＃34; nscr＆＃34;不再受缩放影响。因此，如果在具有CTRL和鼠标滚轮的浏览器中或通过手势在移动设备上，则更改缩放，菜单应继续显示为100％的缩放。强力变焦让问题变得清晰。然后菜单占用显示屏上的太多空间。缩放应该通常在class =＆＃34; nscr＆＃34;之外进行。我不想使用像jquery或bootstrap这样的外部库。欢迎使用HTML，CSS和JavaScript的所有解决方案。有谁知道如何解决这个问题？

这是我的代码：

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-size: 100%;
}

div.nscr {
  width: 100%;
  padding-left: 10%;
  background: #FFFFFF;
  color: #000000;
}

div.content {
  box-shadow: 0em 0em 1.25em silver;
  clear: left;
  height: 93%;
  overflow: auto;
  background: #ffffff;
  color: #000000;
}

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <title>Test</title>
  <meta name="viewport" content="width-device-width; initial-scale-1.0; maximum-scale-1.0; user-scalable-no" charset=UTF-8>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="nscr">
    <h1>Menu</h1>
  </div>
  <div class="content">
    <p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
      <br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
      <br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
      <br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
      <br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    </p>
  </div>
</body>

</html>

＆＃13;

使不可滚动的DIV-Container不可缩放（HTML / CSS / JS）

0 个答案: