All geek questions in one place

Long h1 increases the font size of all statically positioned text in mobile browsers

I found that in mobile browsers Chrome and Firefox h1 at a certain length increases the font size of all the statically placed text on the page, but not quite positioned text. The length h1 needed to run the problem seems to depend on the browser and (possibly) the device.

For example, on Nexus 4 using Chrome or Firefox, the text h1 and the static positional div text from the following code are too large, while the absolutely positioned div text is displayed in normal size. Removing 2 characters of text from the h1 tag causes all text to be displayed at its normal size in Chrome. Deleting two more characters causes all text to display at its normal size in Firefox.

<html> <body style="margin: 0;"> <h1 style="font-size: 1em;">h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1</h1> <div style="font-size: 1em;">div</div> <div style="position: absolute; font-size: 1em;">absolute</div> </body> </html>

Does anyone know why this is happening and how to control it?

+4
source share
1 answer

Have you tried experimenting with a metaphor in viewport? This meta allows the mobile browser to determine the size of certain elements based on your size specifications.

Here is how you apply it:

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
0
source

Source: https://habr.com/ru/post/1498757/

More articles:


All Articles