我有这个代码：
<select>
<option value="c">Klassen</option>
<option value="t">Docenten</option>
<option value="r">Lokalen</option>
<option value="s">Leerlingen</option>
</select>
在 iPhone 上的全屏网络应用中运行。
当从这个列表中选择某些东西时，iPhone 会放大select 元素。并且在选择某些内容后不会缩小。
如何防止这种情况发生？还是缩小？
【问题讨论】：
标签： javascript css html iphone-web-app
可能是因为字体大小小于阈值，浏览器试图缩放区域，这通常发生在iphone中。
提供元标记属性“user-scalable=no”将限制用户在其他地方缩放。由于问题仅出在 select 元素上，请尝试在您的 css 中使用以下内容，此 hack 最初用于 jquery mobile。
HTML：
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
CSS：
select{
font-size: 50px;
}
【讨论】：
$('<meta>', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head');
user-scalable=no 是您所需要的，因此这个问题实际上有一个明确的答案
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
【讨论】：
minimum-scale=1，这也保留了用户缩放的可能性。
这似乎适用于我解决此问题的情况：
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
font-size: 16px;
}
}
【讨论】：
如果文本设置为小于 16 像素，iPhone 会稍微缩放表单域。我建议将移动表单字段的文本设置为 16 像素，然后将大小改回为桌面。
禁用缩放的答案对可访问性没有帮助/视力不佳的用户可能仍希望在较小的手机上进行缩放。
例子：
# Mobile first
input, textarea, select {
font-size: 16px;
}
# Tablet upwards
@media (min-width: 768px) {
font-size: 14px;
}
【讨论】：
我参加聚会有点晚了，但我找到了一个非常巧妙的解决方法，它只能通过 css 操作来解决这个问题。就我而言，由于设计原因，我无法更改字体大小，也无法禁用缩放。
由于如果文本设置为小于 16 像素，iPhone 会稍微缩放表单字段，我们可以欺骗 iPhone 认为字体大小为 16 像素，然后将其转换为我们的大小。
例如，当我们的文本为 14px 时，它会缩放，因为它小于 16px。因此我们可以根据 0.875 变换尺度。
在以下示例中，我添加了填充以显示如何相应地转换其他属性。
.no-zoom {
font-size: 16px;
transform-origin: top left;
transform: scale(0.875); // 14px / 16px
padding: 4.57px; // 4px / 0.875
}
希望对你有帮助！
【讨论】：
如果字体大小小于 16 像素，iOS 会缩放页面以显示更大的输入字段。
仅在单击任何字段时，它会缩放页面。所以点击后，我们将其设为 16px，然后更改为默认值
下面的 sn-p 对我来说很好，并且针对移动设备，
@media screen and (max-width: 767px) {
select:active, input:active,textarea:active{
font-size: 16px;
}
}【讨论】：
试试这个：
function DisablePinchZoom()
{
$('meta[name=viewport]').attr("content", "");
$('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}
function myFunction()
{
$('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}
<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>
DisablePinchZoom 将在 onchange 之前触发，因此在触发 onchange 时缩放将被禁用。 在onchange函数上，最后可以恢复初始状态。
在 iPhone 5S 上测试
【讨论】：
将所有“选择”字体大小设置为 16 像素
选择{ 字体大小：16px； }
【讨论】：
我认为你不能对孤立的行为做任何事情。
您可以尝试的一件事是完全不缩放页面。如果您的页面是为手机设计的，这很好。
<meta name="viewport" content="width=device-width" />
您可以尝试的另一件事是使用 JavaScript 构造而不是通用的“选择”语句。创建一个隐藏的 div 来显示您的菜单，在 javascript 中处理点击。
祝你好运！
【讨论】：
在这里回答：Disable Auto Zoom in Input "Text" tag - Safari on iPhone
您可以防止 Safari 在用户输入期间自动放大文本字段而不禁用用户的捏缩放功能。只需添加maximum-scale=1，但忽略其他答案中建议的用户规模属性。
如果您的图层中有一个表单在缩放时会“浮动”，这会导致重要的 UI 元素移出屏幕，这是一个值得选择的选择。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
【讨论】：
尝试添加这个 CSS 来禁用 Ios 的默认样式：
-webkit-appearance: none;
这也适用于具有特殊样式的其他元素，例如 input[type=search]。
【讨论】：
已经阅读了几个小时，最好的解决方案是这里的 jquery。这也有助于 iOS Safari 中的“下一个选项卡”选项。我在这里也有输入，但可以随意删除或添加。基本上 mousedown 在焦点事件之前触发并诱使浏览器认为它的 16px。此外，focusout 将触发“下一个选项卡”功能并重复该过程。
$(function(){
$('input, select').on("mousedown focusout", function(){
$('input, select').css('font-size','16px');
});
$('input, select').on("focus", function(){
$('input, select').css('font-size','');
});
})
【讨论】：