禁用自动放大输入「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