Search code examples
htmlmobile-website

HTML font size issue on mobile browser

I am displaying a simple HTML markup in Chrome mobile emulator and I observe that the size of the rendered text gets suddenly very large when text length goes beyond a certain threshold (I observe the same issue on a physical device):

<html>
    <body>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     </body>
 </html>

renders like this:

enter image description here

But

<html>
    <body>
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
     </body>
 </html>

renders with a larger font:

enter image description here

Why is that so?

Solution

  • Use css to set the font size manually and instead of using a specific number of pixels(pixels is the default) to determine the size use em like this.

        body{
    font-size: 1.5em;
}

    This forces the HTML to keep the text size proportional despite the browser or window size.

    You could use inline css as well like this.

     <BODY>
    <span style="font-size:1.5em;">
       lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    </span>
 </BODY>

    This happens because when the browser determines the font size, based on pixels, it pays no attention to the size of the screen that it is being displayed on. However, when you use em the browser bases the size on how many pixels it has to work with.