使用输入标签在 chrome android 中显示我的页面时，为什么会出现不同的字体大小

Question

为什么 android 的 chrome 浏览器在 'form' 标签内显示文本，其字体大小与其外面的文本不同。 我尝试在 CSS 中为所有文本提供相同的字体大小和字体，但似乎没有什么区别。

如果您运行下面的代码片段，您将看不到效果。 我认为查看此问题的唯一方法是在 android 手机上。 我已经把这个页面放到网上了。 这是通过 Chrome 开发人员工具查看的视图。
form标签开始前少于240个字符时，似乎不会出现此错误。 如果您使用超过 240 个字符，则会发生错误。 这可能是一个错误吗？

 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>

可能出了什么问题，我该如何解决？

Answer 1

我找到了解决方案！ 把这条线放到 Head 里。

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

Answer 2

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

试试这个

Answer 3

表单的字体样式不一定适用于表单字段，例如input 。 您可以指定input字段应使用相同的字体，如下所示：

 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>

例如，此代码还包括对label和select字段的字体支持。 请注意 HTML 代码段中label的使用。 您还可以选择支持其他表单元素，例如按钮。

Answer 4

詹姆斯·库里写道：

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

谢谢，詹姆斯——“视口”元标签解决了我的问题。 然而，结果文本最终与没有元标记的最小文本大小相同 - 但至少可以在需要时在 css 中处理（但确保这样做不会弄乱桌面上的演示文稿）。

这仅在 Android Chrome 中表现出来 - 而不是桌面上的 Chrome 或 Firefox 的任何变体。 所以看起来谷歌确实试图在任何地方强制使用这个元标记——即使只有手机上的小屏幕有时没有它就难以辨认。 平板电脑不需要它的易读性。

表格还有另一个 Android Chrome 问题：不同颜色背景的单元格间距。 通常padding-top:0.5em; 可以解决问题，但padding采用单元格的背景颜色，这不是我想要的。 所以我使用了border-top:0.5em solid white; 得到我需要的间距。 （示例颜色，白色，应该与您的表格的背景颜色相同 - 您不能使用transparent因为单元格背景颜色会显示出来（即它会具有与padding相同的效果）。是的 - 我可以使用border-spacing ，但这适用于整个表格：我只希望它适用于特定的行。正如我最初所想的那样 - 下面的代码完全符合我在桌面上的需求：

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

.. 这是红色背景上的白色文本中的 RED 这个词，上面有一个白色的分隔符。 但是，在 Android Chrome 中，我的边框块周围有一个令人讨厌的 1 像素宽边框，它是单元格的背景颜色 - 因此只有在单元格背景颜色较深时才可见。 当元标记就位时，这种烦恼就会消失。