Question

为什么Android浏览器的Chrome浏览器会在“表格”中显示文字。标记与其外部文本的字体大小不同。我尝试在CSS中为所有文本提供相同的字体大小和字体，但它似乎没有什么区别。

如果您运行下面的代码段，则无法看到效果。我认为查看此问题的唯一方法是在Android手机上。我已将该网页放在网上here。这是view through Chrome developer tools 当表单标记开始之前少于240个字符时，似乎不会发生此错误。如果使用超过240个字符，则会发生错误。这可能是个错误吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

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

试试这个

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 3

我找到了解决方案！将这一行放入头部。

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

Answer 4

詹姆斯·柯里（James Currie）写道：

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

谢谢James，“ viewport”元标记解决了我的问题。但是，最终生成的文本的大小与没有meta标签的最小文本大小相同-但至少可以在CSS中根据需要进行处理（但请确保这样做不会弄乱桌面上的演示文稿）。

这仅在Android Chrome中显示，而不在台式机或Firefox的任何变体中显示。因此，确实看起来Google确实试图在任何地方强制使用此meta标签-即使只有手机上的小屏幕有时没有它也难以辨认。平板电脑不需要它的可读性。

Android表格还有另一个问题：背景不同颜色的单元格间距。通常，padding-top:0.5em;可以解决问题，但是padding具有单元格的背景色，这不是我想要的。因此，我使用border-top:0.5em solid white;来获得所需的间距。（示例颜色白色应与表格的背景颜色相同-您不能使用transparent，因为单元格的背景颜色会透彻显示（即，其效果与padding相同））。是的-我本可以使用border-spacing，但这适用于整个表：我只希望它适用于特定的行。正如我原本以为的那样，所有hunky-dory-下面的代码正是我想要的我的桌面：

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

..这是红色文本中红色背景上带有白色分隔符的红色字。但是，在Android Chrome浏览器中，边框区域周围有一个烦人的1像素宽的边框，这是单元格的背景颜色-因此只有在单元格背景是强烈的颜色时才可见。放置meta标签后，这种烦恼便消失了。

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

4 个答案: