Does Mobile View in Chrome-Dev-Tools force scaling?
Question
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!
1 answers
solution1
4 ACCPTED 2020-01-09 11:39:27
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.