使用輸入標簽在 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 像素寬邊框，它是單元格的背景顏色 - 因此只有在單元格背景顏色較深時才可見。 當元標記就位時，這種煩惱就會消失。