停用自動放大輸入「Text」標籤 – iPhone 上的 Safari

問題描述

我做了一個 html 頁面，它具有型別為”text” 的<input> 標籤。當我使用 iPhone 上的 Safari 點選它時，頁面變大 (自動縮放) 。有誰知道如何停用這個？

最佳解決方案

如果 font-size 小於 16px，則瀏覽器將縮放，表單元素的預設 font-size 為 11px(至少在 Chrome 和 Safari 中) 。

另外，select 元件需要連線 focus pseudo-class 。

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

沒有必要使用上述所有內容，您只需對所需的元素進行樣式，例如：僅 text，number 和 textarea：

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

使輸入元素從父樣式繼承的替代解決方案：

body {
  font-size: 16px;
}
input[type="text"]
  font-size: inherit;
}

次佳解決方案

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

新功能：IOS 將仍然放大，除非您在輸入上使用 16px 而不用焦點。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

我新增了一個背景，因為 IOS 在選擇上新增了任何背景。

第三種解決方案

如果您的網站設計適合移動裝置，您可以決定不允許擴充套件。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

這解決了您的移動頁面或表單將要到達’float’ 的問題。

第四種方案

總結答案是：將字型大小設定為至少 16px

第五種方案

input[type='text'],textarea {font-size:1em;}

第六種方案

解決這個問題的正確方法是將元視口更改為：



<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

第七種方案

沒有乾淨的方法我可以找到，但這是一個駭客…

1) 我注意到滑鼠懸停事件發生在縮放之前，但縮放發生在 mousedown 或 focus 事件之前。

2) 您可以使用 javascript 動態更改 META 視口標籤 (請參閱 Enable/disable zoom on iPhone safari with Javascript?)

所以，嘗試這個 (在 jquery 中顯示緊湊性)：

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

這絕對是一個駭客… 可能有些情況下，滑鼠懸停/下拉並不總是抓住入口/出口，但它在我的測試中執行良好，是一個堅實的開始。

第八種方案

我最近 (今天：D) 不得不整合這個行為。為了不影響包括組合在內的原始設計領域，我選擇在該領域的重點應用轉型：

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

第九種方案

將 user-scalable = 0 新增到視口元素如下

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

為我工作:)

第十種方案

Javascript 是在 iOS 7 上工作的。這是基於 @dlo 的答案，但是 mouseover 和 mouseout 事件被 touchstart 和 touchend 事件所取代。基本上這個指令碼會增加一個半秒超時，然後縮放再次啟用，以防止縮放。

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
}

參考文獻

Disable Auto Zoom in Input 「Text」 tag – Safari on iPhone

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

停用自動放大輸入「Text」標籤 – iPhone 上的 Safari