body {
margin: 0;
}
div {
box-sizing: border-box;
background-color: red;
width: 100%;
height: 300px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>Text that overflooooooooooooooooooooooooooooooooooooooooooooooooooooooooooows </div>
</body>
</html>When I inspect the above page with Chrome devtools, turn on Device Toolbar
and set device width to anything below 450 (so that the text overflows)
and device type to Mobile,
there is a gap of space to the right from div.
And as I adjust the width of the device the width of the div is always smaller than the width of the screen. Though the text overflows I expect the div to always be as wide as the screen because the div is a child of the body and it has width: 100%;. Moreover, the devtools say that the div has the same width as the screen.
This issue does not happen on desktop (i.e. if I set device type to Desktop).
What is even weirder is that the devtools say that the div is as wide as the screen.
If I switch to Desktop device type and then back to Mobile than the issue disappears but the page seems zoomed in.
Also when I launch this page on a real mobile device where text still overflows, the issue seems to disappear
but when I zoom out it is still there.
So I assume that when I initially opened the page on the real mobile device, the browser set the zoom value automatically so that the div seems to be as wide as the parent.
What piece of HTML and CSS theory do I miss so that I don't understand the reason behind the issue? Why does it happen? How do I fix the problem?
Try this instead: