Below is a code snippet that I am working with:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div>This text is short.</div>
</body>
</html>
When I view this in Google Chrome's mobile emulator, everything looks normal. However, when I modify the content of the div like below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div>This is a very long piece of text...</div>
</body>
</html>
Suddenly, the font size becomes much larger. Strangely, the computed font size of the div is now 41.791px when using the iPhone SE emulator (375 * 667).
The issue is resolved if I include viewport meta tag in the <head>. But, I'm puzzled as to why this happens without setting the viewport. I know viewport helps adjust content size for mobile screens, but why do different text lengths result in varying font sizes?