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?

Solution

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 with meta tag