0

My goal is that the code in class = "nscr" is no longer affected by zooming. So if in the browser with CTRL and mouse wheel or on the mobile device by gesture, the zoom is changed, the menu should continue to be displayed as a zoom of 100%. The problem becomes clear with strong zoom. Then the menu takes up too much space on the display. Zooming should be done normally outside of class = "nscr". I do not want to use external libraries like jquery or bootstrap. All solutions using HTML, CSS and JavaScript are welcome. Does anyone have any idea how to solve this problem?

This is my code:

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;
}
<!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>
w0rs3
  • 1
  • 3
  • What is the reasoning behind wanting to achieve this? – Taylor A. Leach Jun 15 '18 at 18:04
  • I've written a website that works without external libraries except for this problem. I do not want to add any libraries for that. I like the design and I believe that the solution can help others too. – w0rs3 Jun 15 '18 at 18:27
  • It's my understanding that one of the ways people are doing this is to detect the zoom and scale the element up or down. This would be pretty tricky as each browser handles DPI differently. A lot of other solutions are hackish. – Taylor A. Leach Jun 15 '18 at 18:33
  • This is not an easy problem to solve cross-browser: https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers – skyline3000 Jun 15 '18 at 18:33
  • What you're describing also isn't really a 'problem' and most users wold want the view to become larger when they zoom in on something... – Taylor A. Leach Jun 15 '18 at 18:34

0 Answers0