標籤: web

在 iOS safari 或 chrome 中當你要輸入文字時，文字框會自動 zoom in。

要避免這種情形可以使用以下 CSS，原因是 iOS 會強制將小於 16px 的 input 與 select 文字 zoom in 至 16px 大小，而預設的 input 以及 select 字體大小都為 11px ，所以你只要自行將 input 與 select 的字體大小指定為 16px 就好了。

以下 CSS 你可以全貼上，也可以選擇你需要的項目指定就好。
注意如果你有自行設定 input 和 select 其他字型大小(小於 16px 的) 你可以用 !important; 讓後續的 CSS 失效。

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}