CODEWITHSUNDEEP
htmlmobile-website
sdabet
sdabet

Reputation: 18670

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?

Upvotes: 0

Views: 151

Answers (3)

Christopher Snyder
Christopher Snyder

Reputation: 70

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.

Upvotes: 3

Taras Kumpanenko
Taras Kumpanenko

Reputation: 96

Add following code in <head>. Browser thinks that is desktop version and try to scale it. that why it’s so small: <meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 0

jacobherrington
jacobherrington

Reputation: 463

This happens because browsers have native CSS sheets that they apply to markup when they display it - that is why many front-end frameworks use a variant of normalize.css.

NOTE: As to why the number of characters changes the size of the font, I do not know, you'd have to refer to that browser's default style sheet. It may also have to do with the fact that your text falls between body tags and not paragraph tags, anchor tags, header tags, etc.

Upvotes: 0

Related Questions