我制作了一个HTML页面，其中有一个＜input＞标记，类型为“text”。当我在iPhone上使用Safari点击它时，页面会变大（自动缩放）。有人知道如何禁用此功能吗？
当前回答
解决此问题的正确方法是将元视口更改为：
<meta name=“viewport”content=“width=设备宽度，初始比例=1，最大比例=1，用户可缩放=0”/>
重要提示：不要设置最小刻度！这将保持页面可手动缩放。
其他回答
总之，答案是：将表单元素的字体大小设置为至少16px
这对我有用：
input, textarea {
font-size: initial;
}
使用（悬停：无）和（指针：粗略）以所有触摸屏设备为目标：
这里的许多答案都依赖于部署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;
}
}
结果
当使用触摸屏设备时，当上面的任何交互式表单元素被聚焦时，该表单元素的字体大小被临时设置为16px。
这反过来会禁用iOS Safari Mobile自动缩放。
用户初始化的捏缩缩放在所有设备上都不受影响，并且永远不会被禁用。
将用户scalable=0添加到视区元，如下所示
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=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();
}
