[英]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.为什么 android 的 chrome 浏览器在 'form' 标签内显示文本,其字体大小与其外面的文本不同。 I've tried giving all text the same font size and font in CSS but it doesn't seem to make a difference.
我尝试在 CSS 中为所有文本提供相同的字体大小和字体,但似乎没有什么区别。
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.
我认为查看此问题的唯一方法是在 android 手机上。 I've put the page online here .
我已经把这个页面放到网上了。 Here is the view through Chrome developer tools .
这是通过 Chrome 开发人员工具查看的视图。
It seems that this error does not occur when there are less than 240 characters before the form tag starts. form标签开始前少于240个字符时,似乎不会出现此错误。 If you use more than 240 characters the error occurs.
如果您使用超过 240 个字符,则会发生错误。 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?可能出了什么问题,我该如何解决?
I found the solution!我找到了解决方案! Put this line into the Head.
把这条线放到 Head 里。
<meta name="viewport" content="initial-scale=1">
input {
font-size : 18px;
font-family : "Times New Roman",Times,serif;
}
Try this试试这个
The font style for your form doesn't necessarily apply to the form field(s), such as input
.表单的字体样式不一定适用于表单字段,例如
input
。 You can specify that input
fields should use the same fonts, like this:您可以指定
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>
This code also includes font support for label
and select
fields, as an example.例如,此代码还包括对
label
和select
字段的字体支持。 Note the use of the label
in the HTML snippet.请注意 HTML 代码段中
label
的使用。 You may also choose to include support for additional form elements, such as buttons.您还可以选择支持其他表单元素,例如按钮。
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).
然而,结果文本最终与没有元标记的最小文本大小相同 - 但至少可以在需要时在 css 中处理(但确保这样做不会弄乱桌面上的演示文稿)。
This only manifests itself in Android Chrome - not Chrome on a desktop or any variant of Firefox.这仅在 Android Chrome 中表现出来 - 而不是桌面上的 Chrome 或 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.表格还有另一个 Android Chrome 问题:不同颜色背景的单元格间距。 Normally
padding-top:0.5em;
通常
padding-top:0.5em;
would do the trick, but padding
takes on the cell's background colour, which was not what I wanted.可以解决问题,但
padding
采用单元格的背景颜色,这不是我想要的。 So I used border-top:0.5em solid white;
所以我使用了
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: (示例颜色,白色,应该与您的表格的背景颜色相同 - 您不能使用
transparent
因为单元格背景颜色会显示出来(即它会具有与padding
相同的效果)。是的 - 我可以使用border-spacing
,但这适用于整个表格:我只希望它适用于特定的行。正如我最初所想的那样 - 下面的代码完全符合我在桌面上的需求:
<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. .. 这是红色背景上的白色文本中的 RED 这个词,上面有一个白色的分隔符。 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.
但是,在 Android Chrome 中,我的边框块周围有一个令人讨厌的 1 像素宽边框,它是单元格的背景颜色 - 因此只有在单元格背景颜色较深时才可见。 This annoyance disappears when the meta tag is in place.
当元标记就位时,这种烦恼就会消失。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.