我制作了一个HTML页面，其中有一个＜input＞标记，类型为“text”。当我在iPhone上使用Safari点击它时，页面会变大（自动缩放）。有人知道如何禁用此功能吗？
当前回答
不用简单地将字体大小设置为16px，您可以：
设置输入字段的样式，使其大于预期大小，允许将逻辑字体大小设置为16px。使用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%;
}
输入字段的逻辑字体大小为16px，而文本大小为12px。
我有一篇博客文章，在这里我将稍微详细介绍一下，并将此示例作为可查看的HTML：iPhone上Safari无输入缩放，像素完美方式
其他回答
顺便说一下，如果您使用Bootstrap，您可以只使用此变体：
.form-control {
font-size: 16px;
}
请不要使用Javascript或黑客来使其工作。这将影响您在网络上的项目分数。
这将起到作用：
input, input:active, input:focus, input:focus-within, input:hover, input:visited {
font-size: 16px!important;
}
即使有了这些答案，我也花了三天的时间才弄清楚到底发生了什么，我可能在未来再次需要解决方案。
我的情况与所描述的略有不同。
我在页面的一个div中有一些内容可编辑的文本。当用户单击一个不同的div（一个排序按钮）时，我自动选择了contenteditable div中的一些文本（之前已保存并清除的选择范围），对该选择运行一个富文本execCommand，然后再次清除。
这使我能够根据用户与页面上其他地方的颜色分隔符的交互无形地更改文本颜色，同时保持选择的正常隐藏状态，让他们在适当的上下文中看到颜色。
好吧，在iPad的Safari上，单击颜色分区会导致屏幕上的键盘出现，我所做的一切都不会阻止它。
我终于弄明白iPad是如何做到这一点的。
它监听触发可编辑文本选择的触摸开始和触摸结束序列。
当这种组合发生时，它会显示屏幕键盘。
实际上，它在放大可编辑文本的同时展开基础页面。我花了一天时间才明白我看到了什么。
因此，我使用的解决方案是拦截这些特定颜色div上的touchstart和touchend。在这两个处理程序中，我停止传播和冒泡，并返回false。但在touchend事件中，我触发的行为与单击触发的行为相同。
所以，在之前，Safari触发了我认为是“touchstart”、“mousedown”、“touchend”、“mouseup”、“click”的操作，因为我的代码，一个文本选择，按照这个顺序。
由于拦截而产生的新序列只是文本选择。在Safari处理和执行键盘操作之前，其他所有内容都会被拦截。touchstart和touchend拦截也防止触发鼠标事件，在上下文中这是完全正常的。
我不知道更简单的方法来描述这一点，但我认为这里有它很重要，因为我在第一次遇到这个问题的一小时内就找到了这个线索。
我有98%的把握，同样的修复方法也适用于输入框和其他任何东西。拦截触摸事件并单独处理它们，而不让它们传播或冒泡，并考虑在微小超时后进行任何选择，以确保Safari不会将该序列识别为键盘触发器。
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自动”。你可能需要，也可能不需要，但为了完整起见，我将其包括在内。
将用户scalable=0添加到视区元，如下所示
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
为我工作：）
