防止iPhone放大在Web应用程序中的“select”

我有这个代码：

<select> <option value="c">Klassen</option> <option value="t">Docenten</option> <option value="r">Lokalen</option> <option value="s">Leerlingen</option> </select> 

在iPhone上运行全屏Web应用程序。

当从这个列表中select一些东西时，iPhone放大select元素。 select一些东西后不会缩小。

我怎样才能防止这个？ 或缩小回来？

Answer 1

这可能是因为浏览器试图缩放区域，因为字体大小小于阈值，这通常发生在iphone。

赋予元标记属性“user-scalable = no”将限制用户在别处缩放。 由于问题是只有select元素，请尝试使用以下在您的CSS，这个黑客最初是用于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; } 

src： 在iphone中select后取消缩放

Answer 2

user-scalable = no是你需要的，只是这个问题实际上是一个确定的答案

 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

Answer 3

这似乎在解决这个问题的情况下工作：

 @media screen and (-webkit-min-device-pixel-ratio: 0) { select:focus, textarea:focus, input:focus { font-size: 16px; } } 

由Christina Arasmo Beymer 在这里推荐

Answer 4

如果文本设置为小于16像素，则iPhone将略微缩放表单域 。 我build议将移动表单域的文本设置为16像素，然后覆盖桌面的大小。

说是禁用缩放的答案对于视力不佳的用户来说是无益的，但可能仍然希望放大较小的移动设备。

例：

 # Mobile first input, textarea, select { font-size: 16px; } # Tablet upwards @media (min-width: 768px) { font-size: 14px; } 

Answer 5

尝试这个：

 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被触发的时候缩放将被禁用。 在onchangefunction上，最后可以恢复初始状态。

在iPhone 5S上testing

Answer 6

我不认为你不能孤立地做任何事情。

你可以尝试的一件事是保持页面放大。 如果您的页面是为手机devise的，那么这很好。

 <meta name="viewport" content="width=device-width" /> 

你可以尝试的另一件事是使用JavaScript构造，而不是通用的“select”语句。 创build一个隐藏的div来显示你的菜单，在javascript中处理点击。

祝你好运！