Why am I getting different font sizes when displaying my page in chrome android using input tag

Question

Why is it the chrome browser for android is displaying text within the 'form' tag in a different font size to the text outside it. I've tried giving all text the same font size and font in CSS but it doesn't seem to make a difference.

If you run the snippet code below you won't see the effect. I think the only way to view this problem is on an android phone. I've put the page online here . Here is the view through Chrome developer tools .
It seems that this error does not occur when there are less than 240 characters before the form tag starts. If you use more than 240 characters the error occurs. Could this be a bug?

 span.time1 { font-size : 18px; font-family : "Times New Roman",Times,serif; } form.time2 { font-size : 18px; font-family : "Times New Roman",Times,serif; }

 <Span class = "time1">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped overThe quick brown fox jumped over the lazy dog.The quick brown fox jumped overc</Span> <form class = "time2"> First name:<br> <input type="text" name="firstname"> </form>

What could be going wrong, and how do I fix it?

Answer 1

I found the solution! Put this line into the Head.

<meta name="viewport" content="initial-scale=1">

Answer 2

input {
font-size : 18px;
font-family : "Times New Roman",Times,serif;        
   }

Try this

Answer 3

The font style for your form doesn't necessarily apply to the form field(s), such as input . You can specify that input fields should use the same fonts, like this:

 span.time1, form.time2, form.time2 > input, form.time2 > label, form.time2 > select { font-size : 18px; font-family : "Times New Roman",Times,serif; }

 <Span class = "time1">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped overThe quick brown fox jumped over the lazy dog.The quick brown fox jumped overc</Span> <form class = "time2"> <label for="firstname">First name:</label><br> <input type="text" name="firstname" id="firstname"> </form>

This code also includes font support for label and select fields, as an example. Note the use of the label in the HTML snippet. You may also choose to include support for additional form elements, such as buttons.

Answer 4

James Currie wrote:

<meta name="viewport" content="initial-scale=1">

Thanks, James - the "viewport" meta tag sorted out my problem. However, the resulting text ends up by being the same size as the smallest there was without the meta tag - but at least that can be dealt with in css if needed (but ensure doing so doesn't mess up presentation on a desktop).

This only manifests itself in Android Chrome - not Chrome on a desktop or any variant of Firefox. So it really does seem Google is trying to force use of this meta tag everywhere - even though it is only the tiny screens on phones that are sometimes illegible without it. Tablets don't need it for legibility.

There is another Android Chrome problem with tables: spacing of cells with different coloured backgrounds. Normally padding-top:0.5em; would do the trick, but padding takes on the cell's background colour, which was not what I wanted. So I used border-top:0.5em solid white; to get the spacing I required. (The example colour, white, should be the same as your table's background colour - you can't use transparent because the cell background colour would show through (ie. it would have the same effect as padding ). Yes - I could have used border-spacing , but that applies to the whole table: I only wanted it to apply to specific rows. All hunky-dory as I originally thought - the code below rendered exactly what I wanted on my desktop:

<td style="background-color:red; color:white; border-top:0.5em solid white;">RED</td>

.. which is the word RED in white text on a red background with a white separator above it. However, in Android Chrome, there was an annoying 1 pixel wide border round my border block, which was the cell's background colour - so only visible if the cell background is a strong colour. This annoyance disappears when the meta tag is in place.