2

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:

Take this minimal example:

<html>
    <head>
        <style>
            html {
                height: 100%;
            }
            body {
                height: 100%;
                margin: 0;
                font-size: 40px;
            }
            .test {
                background-color: lime;
                height: 100px;
                padding: 20px;
            }
        </style>
    </head>

    <body>
        <div class="test">Test Test Test</div>
    </body>
</html>

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 100px. In normal view, everything is as expected, no scaling.

I have recorded this behavior in this gif: Chrome Resizing

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!

Giraphi
  • 1,383
  • 1
  • 11
  • 26
  • 4
    Try to add in your . You can read this article to understand the diffrence between CSS Resolution and Device Resolution: https://medium.com/@elad/understanding-the-difference-between-css-resolution-and-device-resolution-28acae23da0b – Liveindream Jan 08 '20 at 17:52
  • Thank you @Liveindream ! The `` tag you posted was exactly what I was looking for. I expected this to be the default behavior, but I now understand that the down-scaling makes sense to have a chance to render non-responsive old websites. I can't mark your comment as accepted answer, can I? – Giraphi Jan 09 '20 at 08:48
  • I think it's not implemented by design, you can upvote a comment or add your own answer with all the details, for more info https://meta.stackexchange.com/a/1558 @Raphael – Liveindream Jan 09 '20 at 09:53
  • Okay, I have added an own answer (need to wait until tomorrow to accept it). Unfortunately I can't upvote your comment since I need 15 reputation. Thank you again! – Giraphi Jan 09 '20 at 11:42

1 Answers1

7

The comment by @Liveindream solved my issue:

Try to add <meta name="viewport" content="width=device-width, initial-scale=1.0"> to your <head>.

That way, browsers are prevented from applying scaling to the page. The scaling is a browser strategy to fit non-responsive old websites into a smartphone screen. Read more about it here.

Giraphi
  • 1,383
  • 1
  • 11
  • 26