Menu
By setting a css 'height' property on a parent container 'foo' the calculated 'font-size' of the inner elements changes wrongly. This happens only on a mobile device on Chrome.
To test this please try to run the following code under Chrome and choose any mobile device in the developer console:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.foo {
height: 600px;
color: white;
background: teal;
}
</style>
</head>
<body>
<section>
<h2>Header in first section</h2>
<p>Text with a normal size. Text with a normal size.</p>
</section>
<section class="foo">
<h2>Header in second section</h2>
<p>This text changes size when commenting out 'foo's height property in the Chrome developer console and mobile mode (e.g Galaxy S5) - but why?</p>
</section>
</body>
</html>Then disable (comment out) the 'height' property on the class 'foo'. The calculated 'font-size' for the p-element should not change but it does.
Chrome also shows the wrong size when commenting out the 'height' property in the document itself and reloading the page (-> then the text in both p-element is bigger than normal).
Please help me out - is this a bug that needs to be reported?
736
It seems this is a known problem how mobile browsers handle text sizing. See text-size-adjust. There are several options for this:
<meta name="viewport" content="width=device-width, initial-scale=1">
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
