I was testing some of my html pages readability on mobile devices and discovered that in some parts of the html my text is shrinking on the mobile devices depending on the viewport size (browser dynamically changes the font-size value of the text - no JavaScript, no media queries, nothing.. just plain html) and in other parts does not.
I was trying to understand what did I do in my code that causes this, so I started to strip down my code step by step until getting the minimal possible code which shows the threshold between when it still does the dynamical adjustments and when it doesn't anymore.
I end up with the two codes (see below): index.html which does that and index2.html which doesn't.
You can replicate this behavior when opening the codes below, going to Developer tools in Chrome, selecting Device Mode and choosing Dimensions: Responsive. Now if you go to Calculated tab and search for font-size value, you will see that all the <li> tags (and only those) are dynamically changing the font-size value as you increase or decrease the width dimension of the simulated device.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul>
<li>
Title 1
<div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3 sssssss</a></li>
</ul>
</div>
</li>
<li>
Title 2
<div>
<ul>
<li>
<a href="#">Item 1</a>
</li>
</ul>
</div>
</li>
<li>
Title 3
<div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
Title 3 sssssssssssss
<div>
<ul>
<li>
<a href="#"
>Item 1 sssssssssss sssssssssss ssssssssssss</a
>
</li>
<li>
<a href="#"
>Item 2 ssssssssss ssssssssss ssssssssssssssss
sssssssssssss</a
>
</li>
<li>
<a href="#">Item 3 sssssss sssssssssssssssss</a>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
and index2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul>
<li>
Title 1
<div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3 ssssss</a></li>
</ul>
</div>
</li>
<li>
Title 2
<div>
<ul>
<li>
<a href="#">Item 1</a>
</li>
</ul>
</div>
</li>
<li>
Title 3
<div>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li>
Title 3 sssssssssssss
<div>
<ul>
<li>
<a href="#"
>Item 1 sssssssssss sssssssssss ssssssssssss</a
>
</li>
<li>
<a href="#"
>Item 2 ssssssssss ssssssssss ssssssssssssssss
sssssssssssss</a
>
</li>
<li>
<a href="#">Item 3 sssssss sssssssssssssssss</a>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
Both files are identical, only the second one has one <li> item shorter by one character!. "Item 3 ssssss" has 6 S's instead of 7. Nothing else. That is all!!
I know the Chrome's Device Mode is just a simulation of mobile devices' behavior, so in order to make sure this is not just some glitch in the simulation, I have uploaded both files online to be able to test it on a real mobile devices:
Anybody can explain this?
If I knew how to make any of my code dynamically change the font-size on purpose like in the first file, it would be a great functionality and I would not need any of those complicated media queries. But at this point, it is happening just by accident and I don't understand why.
Thank you!