我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?


当前回答

将字体大小(用于输入字段)设置为等于正文的字体大小,似乎是阻止浏览器缩小或缩小的原因。我建议使用字体大小:1rem作为更优雅的解决方案。

其他回答

您可以防止Safari在用户输入期间自动放大文本字段,而不禁用用户的缩放功能。只需添加最大比例=1,但忽略其他答案中建议的用户比例属性。

如果您在图层中有一个表单,如果缩放,它会“浮动”,这会导致重要的UI元素移出屏幕,这是一个值得选择的选项。

<meta name=“viewport”content=“width=设备宽度,初始比例=1,最大比例=1”>

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

<meta name=“viewport”content=“width=设备宽度,初始比例=1,最大比例=1,用户可缩放=0”/>

重要提示:不要设置最小刻度!这将保持页面可手动缩放。

正如许多其他答案已经指出的那样,这可以通过向元视口标记添加最大比例来实现。然而,这会导致在Android设备上禁用用户缩放功能。(自v10以来,它不会在iOS设备上禁用用户缩放。)

当设备为iOS时,我们可以使用JavaScript动态地向元视口添加最大比例。这实现了两全其美:我们允许用户缩放,并防止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;

// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

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

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:11自动”。你可能需要,也可能不需要,但为了完整起见,我将其包括在内。

将字体大小(用于输入字段)设置为等于正文的字体大小,似乎是阻止浏览器缩小或缩小的原因。我建议使用字体大小:1rem作为更优雅的解决方案。