Javascript 防止 iPhone 放大网络应用程序中的“选择”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6483425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent iPhone from zooming in on `select` in web-app
提问by seymar
I've got this code:
我有这个代码：
<select>
<option value="c">Klassen</option>
<option value="t">Docenten</option>
<option value="r">Lokalen</option>
<option value="s">Leerlingen</option>
</select>
Running in a full-screen web-app on iPhone.
在 iPhone 上的全屏网络应用程序中运行。
When selecting something from this list, the iPhone zooms in on the select-element. And doesn't zoom back out after selecting something.
当从此列表中选择某些内容时，iPhone 会放大 -select元素。并且在选择某些内容后不会缩小。
How can I prevent this? Or zoom back out?
我怎样才能防止这种情况？还是缩小回来？
回答by Sasi Dhar
It is probably because the browser is trying to zoom the area since the font size is less than the threshold, this generally happens in iphone.
这可能是因为浏览器试图缩放区域，因为字体大小小于阈值，这通常发生在 iphone 中。
Giving a metatag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Since the problem is with selectelement only, try using the following in your css, this hack is originally used for jquery mobile.
提供元标记属性“user-scalable=no”将限制用户在别处缩放。由于问题仅与select元素有关，请尝试在您的 css 中使用以下内容，此 hack 最初用于 jquery mobile。
HTML :
HTML :
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
CSS:
CSS：
select{
font-size: 50px;
}
src: unzoom after selecting in iphone
src：在iphone中选择后取消缩放
回答by sciritai
user-scalable=no is what you need, just so there's actually a definitive answer to this question
user-scalable=no 是你所需要的，所以这个问题实际上有一个明确的答案
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
回答by Triptoph
This seemed to work for my case in addressing this issue:
这似乎适用于我的案例来解决这个问题：
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
font-size: 16px;
}
}
Suggested hereby Christina Arasmo Beymer
回答by martinedwards
iPhone's will zoom form fields slightly if the text is set to less than 16 pixels. I'd suggest setting the mobile form field's text to be 16 pixels and then override the size back down for desktop.
如果文本设置为小于 16 像素，iPhone 将稍微缩放表单字段。我建议将移动表单字段的文本设置为 16 像素，然后覆盖桌面的大小。
The answers saying to disable zoom are unhelpful for partially sighted users may still want to zoom on smaller mobiles.
说禁用缩放的答案对于视力不佳的用户可能仍然希望在较小的手机上进行缩放没有帮助。
Example:
例子：
# Mobile first
input, textarea, select {
font-size: 16px;
}
# Tablet upwards
@media (min-width: 768px) {
font-size: 14px;
}
回答by Layor Zee
I am a bit late to the party, but I found a pretty neat workaround that solves this issue only with css manipulation. In my case I couldn't change the font size due to design reasons, and I couldn't disable zooming as well.
我参加聚会有点晚了，但我找到了一个非常巧妙的解决方法，仅通过 css 操作就可以解决此问题。就我而言，由于设计原因，我无法更改字体大小，也无法禁用缩放。
Since iPhone's will zoom form fields slightly if the text is set to less than 16 pixels, we can trick the iPhone to think that the font size is 16px and then transform it to our size.
由于如果文本设置为小于 16 像素，iPhone 将稍微缩放表单字段，我们可以欺骗 iPhone 认为字体大小为 16px，然后将其转换为我们的大小。
For example, lets take the example when our text is 14px, so it does zoom because it is smaller than 16px. Therefore we can transform the scale, according to 0.875.
例如，让我们举个例子，当我们的文本是 14px 时，它会缩放，因为它小于 16px。因此，我们可以根据 0.875 转换比例。
In the following example I've added the padding to show how to convert other properties accordingly.
在下面的示例中，我添加了填充以显示如何相应地转换其他属性。
.no-zoom {
font-size: 16px;
transform-origin: top left;
transform: scale(0.875); // 14px / 16px
padding: 4.57px; // 4px / 0.875
}
I hope it helps!
我希望它有帮助！
回答by Dario Brizio
Try this:
尝试这个：
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 will be fired before the onchange so zoom will be disable at the time the onchange is fired. On the onchange function, at the end you can restore the initial situation.
DisablePinchZoom 将在 onchange 之前触发，因此在触发 onchange 时将禁用缩放。在 onchange 功能上，最后可以恢复初始状态。
Tested on an iPhone 5S
在 iPhone 5S 上测试
回答by nand-63
iOS zooms the page to show a larger input field if its font-size is less than 16px.
如果字体大小小于 16px，iOS 会缩放页面以显示更大的输入字段。
only On click of any field, it's zooming the page. so on click, we are making it as 16px and then changed to default value
仅在单击任何字段时，它才会缩放页面。所以点击后，我们将其设为 16px，然后更改为默认值
below snippet works fine to me and targeted for mobile devices,
下面的片段对我来说很好用，并且针对移动设备，
@media screen and (max-width: 767px) {
select:active, input:active,textarea:active{
font-size: 16px;
}
}回答by nasty
Set all 'select' font size to 16px
将所有“选择”字体大小设置为 16px
select{ font-size: 16px; }
选择{字体大小：16px; }
回答by Nimrod5000
Been reading for a few hours on this and the best solution is this jquery here. This also helps with the "next tab" option in iOS Safari. I have inputs here as well but feel free to remove them or add as you like. Basically the mousedown fires before the focus event and tricks the browser into thinking its 16px. In addition, the focusout will trigger on the "next tab" feature and repeat the process.
已经阅读了几个小时，最好的解决方案是这里的 jquery。这也有助于 iOS Safari 中的“下一个选项卡”选项。我在这里也有输入，但可以随意删除或添加。基本上 mousedown 在焦点事件之前触发并诱使浏览器认为它的 16px。此外，焦点将在“下一个选项卡”功能上触发并重复该过程。
$(function(){
$('input, select').on("mousedown focusout", function(){
$('input, select').css('font-size','16px');
});
$('input, select').on("focus", function(){
$('input, select').css('font-size','');
});
})
回答by Vineel Shah
I don't think you can't do anything about the behavior in isolation.
我认为你不能孤立地对这种行为做任何事情。
One thing you can try is keep the page from zooming at all. This is good if your page is designed for the phone.
您可以尝试的一件事是完全不缩放页面。如果您的页面是为手机设计的，这很好。
<meta name="viewport" content="width=device-width" />
Another thing you could try is using a JavaScript construct instead of the generic "select" statement. Create a hidden div to show your menu, process the clicks in javascript.
您可以尝试的另一件事是使用 JavaScript 构造而不是通用的“select”语句。创建一个隐藏的 div 来显示你的菜单，在 javascript 中处理点击。
Good luck!
祝你好运！
