我有这段代码:
<select>
<option value="c">Klassen</option>
<option value="t">Docenten</option>
<option value="r">Lokalen</option>
<option value="s">Leerlingen</option>
</select>
在iPhone上以全屏web应用程序运行。
当从此列表中选择某个内容时，iPhone会放大select元素。并且在选择完内容后不会缩小回去。
我该如何防止这种情况发生？或者缩小回去？
可能是因为浏览器尝试缩放区域，因为字体大小小于阈值，在iPhone上通常会发生这种情况。
给予meta标签属性"user-scalable=no"将限制用户在其他地方缩放。由于问题仅出现在select元素中，请尝试在您的CSS中使用以下内容，此hack最初用于jquery移动。
HTML：
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
CSS：
select{
font-size: 50px;
}
你需要使用user-scalable=no，这样就可以给出这个问题的明确答案了。
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
minimum-scale=1，这也保留了用户缩放的可能性。 - Micros如果文本大小小于16像素，iPhone会略微缩放表单字段。我建议将移动端表单字段的文本设置为16像素，然后在桌面端覆盖尺寸缩小。
对于无障碍/部分视力用户仍可能想在较小的移动设备上进行缩放，因此建议不要禁用缩放。
例如：
# Mobile first
input, textarea, select {
font-size: 16px;
}
# Tablet upwards
@media (min-width: 768px) {
font-size: 14px;
}
这种方法似乎适用于我解决此问题：
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
font-size: 16px;
}
}
这里由Christina Arasmo Beymer建议，请参考此处
.no-zoom {
font-size: 16px;
transform-origin: top left;
transform: scale(0.875); // 14px / 16px
padding: 4.57px; // 4px / 0.875
}
希望这有所帮助！
transform-origin的值（例如，在我的情况下，center是最合适的）。 - undeletable如果iOS浏览器中输入框的字体大小小于16px，则会缩放页面以显示更大的输入框。
只有在点击字段时，它才会缩放页面。因此，我们在单击时将其设置为16px，然后再改回默认值。
下面的代码片段对移动设备有效。
@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>
在触发 onchange 事件之前，将会触发 DisablePinchZoom 事件，因此在 onchange 触发时，缩放将被禁用。在 onchange 函数的结尾处，您可以恢复最初的状态。
已在 iPhone 5S 上测试通过。
我认为你无法单独解决这种行为问题。
你可以尝试的一件事是完全禁止页面缩放。如果你的页面是为手机设计的，这是一个不错的选择。
<meta name="viewport" content="width=device-width" />
你可以尝试使用JavaScript构造而不是通用的“select”语句。创建一个隐藏的div来显示你的菜单，使用JavaScript处理点击事件。
祝你好运！
已经花了几个小时阅读这个问题，最好的解决方案是使用这里的jQuery。这也有助于iOS Safari中的“下一个选项卡”选项。我在这里有一些输入，但随意删除或添加。基本上，mousedown事件会在focus事件之前触发，并欺骗浏览器认为它是16像素。此外，focusout将触发“下一个选项卡”功能并重复该过程。
$(function(){
$('input, select').on("mousedown focusout", function(){
$('input, select').css('font-size','16px');
});
$('input, select').on("focus", function(){
$('input, select').css('font-size','');
});
})
$('<meta>', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head');- Abbas