title: Does Mobile View in Chrome-Dev-Tools force scaling?
body: <p>It seems to me that Chrome (in contrast to for example Firefox) automatically scales down certain html-content when using the developer tools' mobile view: </p>
  
  <p>Take this minimal example:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              html {
                  height: 100%;
              }
              body {
                  height: 100%;
                  margin: 0;
                  font-size: 40px;
              }
              .test {
                  background-color: lime;
                  height: 100px;
                  padding: 20px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="test"&gt;Test Test Test&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>For me, when going into mobile view, the green divs' size and font-size is scaled relatively to the window width. However, I would expect it to have a constant height of <code>100px</code>. In normal view, everything is as expected, no scaling.</p>
  
  <p>I have recorded this behavior in this gif:
  <a href="https://i.stack.imgur.com/4QcaX.gif" rel="nofollow noreferrer">Chrome Resizing</a></p>
  
  <p>Do I have a fundamental misunderstanding of css or is this a special behavior by Chrome? How should I create divs of constant height, so I can work with them in Chrome? Thank you!</p>