Search code examples
htmlandroid-layoutscale

Disproportionate font sizing in Android browser (SDK emulator)

I can't understand the Android browser's behavior with scaling text. Here is my HTML-code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=600">
<title>TestBug</title>
<style type="text/css">
    html, body {
        font-size:16px;
        font-family: Arial, sans-serif;
    }
    p {
        width:600px;
        margin:0 auto;
        height:200px;
        background-color:#bbeabb;
        font-size:16px;
    }
</style>
</head>
<body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
    </p>
</body>
</html>

Problem is that here is a p-element with fixed height. Also text inside this p has font-size defined as 16 px. There is an image of how it looks in desktop:

the paragraph with fixed 200px height, as it appears in desktop browser

When I look at the same page in Android browser I expect to see exact the same as in the desktop browser (paragraph with green background and text inside it not overflowing), i.e. expected behavior is that Android browser must keep proportions, so the inner text occupies approximately a half of the paragraph's height. But instead the next is happening:

the paragraph with fixed 200px height, as it appears in android browser

As you see although paragraph's height and width were scaled according to the usage of viewport-metatag with width as 600 px, but the text's height was not scaled accordingly.

When I use 'em'-units all is fine, though.

Can someone please explain what is happening here?

Solution

  • 'text-size'-setting was set to 'large' in browser preferences. That is why it is best to always use ems in page measurements