Can someone explain why perceived text size and wrapping change when adding the commented line into the body, below?
To clarify, I want to understand what the layout mechanism is doing in the problem case. I’m not looking for a solution, per se.
This is on mobile (it’s fine on desktop).
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html { background-color: dimgray; }
body {
background-color: gray;
font-family: monospace;
width: 70ch;
}
</style>
</head>
<body>
[== 60 char === === === === === === === === === === === ===]<br>
[== 60 char === === === === === === === === === === === ===]<br>
<!-- [== 60 char === === === === === === === === === === === ===] -->
</body>
</html>
At first, it renders as expected:
But if I un-comment the third body line, the text gets big and wraps:
Just a reminder, this is in mobile view:
>Solution :
The HTML <meta name="viewport"> tag sets the viewport properties of a webpage, influencing how it will be displayed on different devices. The width=device-width makes the width of the webpage follow the screen-width of the device, and initial-scale=1 sets the initial zoom level when the page is first loaded.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reactive Viewport</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>