James Currie James Currie - 4 months ago 13
CSS Question

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

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

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

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