Html Question posted in
Some basic documentation can be found here.

Generated HTML font size differs from original

I have a simple web page, which has a button which adds some text to the web page. For some reason though, the added text seems to be a different size than the original text when viewed from a browser on a cell phone (but appeared OK when viewed from a browser running on a PC)

The long and short of it is, that I have the following in the test2.html file:

<p>extra1</p>
<div id="extra"></div>

Then I press a button which updates the <div>, and I get:

<p>extra1</p>
<div id="extra"><p>Note: if the game involves jumping into shallow water, please remind players to jump in feet first to avoid injury.</p><p></p></div>

(as cut and paste from a Chrome browser’s ‘inspect’ dialog)

On a smartphone, the generated text has a much larger font size than the native text when viewed from a smartphone browser (I reproduced on two different android smartphones running chrome browsers). This does not seem to occur when viewed from a PC, but that may be related to the default font size on the PC.

I do have a style listed in the <head> as so:

<style> h1 {font-size: 2em;} h2 {font-size: 1.4em;} p {font-size: .95em;} </style>

So I would expect the two paragraphs to display the same size. Unfortunately, I was not able to produce a minimal example, however the test web page that reproduces it can be found at www.ulvr.com/swimactivities/test2.html — again apologizing as I don’t have a certificate for the web page, so it pops up warnings about being unsafe… The chrome version that I have on my cell phone that reproduces the issue is 126.0.6478.122.

Does anyone know what might cause this behavior?

Tags:

3

Answers


  1. 0

    Any text added to the #extra div will inherit the same font size as the surrounding components if font-size: inherit; is used.
    Here, updated code:

     <style>
        body {
            font-size: 16px;
        }
        h1 {
            font-size: 2em;
        }
        h2 {
            font-size: 1.4em;
        }
        p {
            font-size: 0.95em;
        }
        #extra {
            font-size: inherit;
        }
    </style>
    Login or Signup to reply.
  2. 0

    I confirmed the issue of the larger output text in Chrome on Android. As Ralph commented, my testing showed that including the viewport meta tag in the <head> resolves the issue.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    screenshot without meta tag

    screenshot without meta tag

    screenshot with meta tag

    screenshot with meta tag

    Login or Signup to reply.
  3. 0

    You can try adding the viewport tag :

    <meta name="viewport" content="width=device-width, initial-scale=1">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search