禁用输入"文本"标签中的自动缩放 - iPhone上的Safari

Question

我制作了一个带有<input>标签的HTML页面type="text".当我在iPhone上使用Safari点击它时,页面变大(自动缩放).有人知道如何禁用它吗？

Answer 1

如果字体大小小于16px并且表单元素的默认字体大小11px(至少在Chrome和Safari中),浏览器将缩放.

此外,select元素需要附加focus伪类.

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

Answer 2

您可以阻止Safari在用户输入期间自动放大文本字段,而不会禁用用户捏缩放的功能.只需添加maximum-scale=1但省略其他答案中建议的用户比例属性.

如果你在一个图层中有一个"浮动"(如果放大),这可能会导致重要的UI元素移出屏幕,这是一个值得的选择.

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

Answer 3

@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在select上没有添加背景.

Answer 4

如果您的网站设计适合移动设备,则可以决定不允许扩展.

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

这解决了您的移动页面或表单将"浮动"的问题.

Answer 5

总之,答案是:将表单元素的字体大小设置为至少16px

Answer 6

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

Answer 7

解决此问题的正确方法是将元视口更改为:

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

Answer 8

我找不到干净的方式,但是这里有一个黑客......

1)我注意到鼠标悬停事件发生在缩放之前,但是缩放发生在mousedown或焦点事件之前.

2)您可以使用javascript动态更改META视口标记(请参阅使用Javascript 启用/禁用iPhone Safari的缩放？)

所以,尝试这个(在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" />');
}

这绝对是一个黑客......可能存在鼠标悬停/下降并不总是捕获进入/退出的情况,但它在我的测试中运行良好并且是一个可靠的开始.

Answer 9

我最近(今天:D)不得不整合这种行为.为了不影响原始设计领域,包括组合,我选择在该领域的重点应用转换:

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

Answer 10

将user-scalable = 0添加到viewport meta,如下所示

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

为我工作:)

Answer 11

受到@jirikuchta 回答的启发，我通过添加以下 CSS 解决了这个问题：

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

没有 JS，我没有注意到任何闪光或任何东西。

值得注意的是，viewportwithmaximum-scale=1也可以工作，但当页面作为 iframe 加载时，或者如果您有其他脚本修改viewport.

Answer 12

不是简单地将字体大小设置为 16px，您可以：

1. 设置输入字段的样式，使其大于其预期大小，允许将逻辑字体大小设置为 16px。
2. 使用scale()CSS 转换和负边距将输入字段缩小到正确的大小。

例如，假设您的输入字段最初的样式为：

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

如果通过将所有尺寸增加 16 / 12 = 133.33% 来放大字段，然后将使用scale()减少 12 / 16 = 75%，则输入字段将具有正确的视觉大小（和字体大小），并且不会放大重点。

由于scale()仅影响视觉大小，您还需要添加负边距以减少字段的逻辑大小。

使用这个 CSS：

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

输入字段的逻辑字体大小为 16 像素，同时显示为 12 像素的文本。

我有一篇博客文章，我在其中详细介绍了一些细节，并将此示例作为可查看的 HTML：
在 iPhone 上的 Safari 中没有输入缩放，像素完美的方式

Answer 13

我查看了多个答案。\

1. maximum-scale=1在标签中进行设置的答案meta在 iOS 设备上运行良好，但在 Android 设备上禁用捏合缩放功能。
2. 有设置的那个font-size: 16px; onfocus对我来说太老套了。

所以我写了一个JS函数来动态改变meta标签。

var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1, maximum-scale=1";
else
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";

Answer 14

2021年解决方案...

好吧，我已经阅读了所有旧答案，但没有一个对我有用。经过几个小时的尝试不同的事情后，最终的解决方案似乎很简单。

input{
    transform: scale(0.875);
    transform-origin: left center;
    margin-right: -14.28%;
}

在 PC 上的 iOS/Android/Chrome 上测试

这允许您使用 14px 字体，如果您需要不同的大小，则缩放因子为 14/16 = 0.875，负边距为 (1 - 0.875) / 0.875 * 100

我的输入的父级设置为“display:flex”，并且它会增长以适合父级，因为它具有“flex: 1 1 auto”。您可能需要，也可能不需要，但为了完整性，我将其包括在内。

Answer 15

在iOS 7上运行的Javascript hack.这是基于@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" />');
} 

Answer 16

这在 iOS Safari 和 Chrome 上对我有用。对于输入选择器，可以设置类或 id 以包含当前。

@supports (-webkit-overflow-scrolling: touch) {
   input {
     font-size: 16px;
   }
}

Answer 17

这对我有用:

input, textarea {
    font-size: initial;
}

Answer 18

我使用了上面的Christina解决方案,但对引导程序进行了少量修改,并将另一条规则应用于台式计算机.Bootstrap的默认字体大小为14px,导致缩放.对于Bootstrap中的"表单控件",以下内容将其更改为16px,从而阻止了缩放.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

对于非移动浏览器,返回14px.

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

我尝试使用.form-control:focus,它将它保持在14px,除了焦点,它将其更改为16px并且它没有修复iOS8的缩放问题.至少在使用iOS8的我的iPhone上,字体大小必须是16px才能让iPhone无法缩放页面.

Answer 19

伪元素不像:focus以前那样工作。从 iOS 11 开始，可以在主要样式之前添加一个简单的重置声明（前提是您不使用较小的字体大小覆盖它们）。

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

值得一提的是，对于诸如 Tachyons.css 之类的 CSS 库，很容易意外覆盖您的字体大小。

例如 class:f5相当于: fontSize: 1rem，如果您将正文字体比例保持在默认值，这很好。

但是：如果您选择字体大小等级：f6这将等同于fontSize: .875rem向上的小显示器。在这种情况下，您需要更具体地了解您的重置声明：

  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}

Answer 20

我也用jQuery做了这个:

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

当然,如果此16px字体大小破坏了设计,则可能必须调整界面中的某些其他元素.

Answer 21

经过一段时间的尝试，我想出了这个解决方案

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

在“ mousedown”上，它将输入的字体大小设置为16px。这将阻止缩放。发生焦点事件时，它将字体大小改回初始值。

与以前发布的解决方案不同，这将使您可以将输入的字体大小设置为所需的大小。

Answer 22

在阅读了这里的几乎每一行并测试了各种解决方案之后，感谢所有分享他们的解决方案的人，这是我在 iPhone 7 iOS 10.x 上提出、测试和为我工作的内容：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: initial;}
}
@media (min-width: 768px) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: inherit;}
}

但是，它有一些缺点，由于在“悬停”状态和“焦点”状态之间发生快速字体大小变化而导致“跳跃”明显 - 以及重绘对性能的影响

Answer 23

用于(hover: none) and (pointer: coarse)定位所有触摸屏设备：

这里的许多答案都诉诸于部署JavaScript或jQuery。

但它应该（而且确实）完全有可能用CSS来控制条件字体呈现之类的问题。

Safari Mobile 要求（有充分的理由）任何表单元素在交互时必须具有最小字体大小16px（或视觉等效值）。

让我们致力于让深思熟虑的用户体验适用于所有触摸屏浏览器。

那么我们可以采用以下方法：

@media only screen and (hover: none) and (pointer: coarse) {

  input,
  select,
  textarea {
    font-size: 11px;
  }

  input:focus,
  select:focus,
  textarea:focus {
    font-size: 16px;
  }
}

结果

使用触摸屏设备时，当上面的任何交互式表单元素获得焦点时，font-size该表单元素的 会暂时设置为16px。

这反过来会禁用 iOS Safari Mobile auto-zoom。

用户启动的捏合缩放在所有设备上均不受影响，并且永远不会被禁用。

Answer 24

正如许多其他答案已经指出的那样，这可以通过添加maximum-scale到meta viewport标签来实现。然而，这具有在Android设备上禁用用户缩放的负面影响。（从v10开始，它不会禁用iOS设备上的用户缩放。）

当设备为iOS时，我们可以使用JavaScript动态添加maximum-scale到元数据viewport。这实现了两全其美：我们允许用户缩放并阻止iOS缩放到焦点上的文本字段。

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

码：

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// /sf/ask/632703781/#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}