防止iPhone缩放forms?

代码:

<select> <option value="1">Home</option> <option value="2">About</option> <option value="3">Services</option> <option value="4">Contact</option> </select> 

当我触摸select ,iPhone放大该元素(并且在取消select后不缩小)。

我怎样才能防止这个? 或缩小回来? 我不能使用user-scalable=no因为我实际上需要这个function。 这是iPhone的select菜单。

更新 :此方法不再适用于iOS 10。


它依赖于视口,你可以通过这种方式禁用它:

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 

添加user-scalable=0 ,它也应该在你的input。

这可以通过设置字体大小:16px到所有input字段来防止。

对于iOS,您可以通过简单地为操作系统(> = 16px)分配足够的字体大小来避免缩放input元素,从而避免需要缩放,例如:

 input, select, textarea { font-size: 16px; } 

这也是各种框架所使用的解决scheme,并且可以避免使用元标记。

这可能有助于看看:

禁用自动缩放input“文本”标签 – iPhone上的Safari

你基本上需要捕获点击一个表单元素的事件,然后不运行放大的默认iOS操作,但仍然允许它放大页面的其余部分。

编辑:

链接提到,

2)你可以dynamic地改变使用javascript的META视口标签(请参阅启用/禁用使用JavaScript Safari Safari的缩放?)

详细说明:

  1. 视口元标记设置为允许缩放
  2. 用户点击表单元素,更改元标记以禁用缩放
  3. 按完成后,视口被更改为允许缩放

如果在单击表单元素时无法更改标签,请使用模仿表单元素的div,当您按下该元素时,它会更改标签,然后调用input。

最大的投票答案设置字体大小不适合我。 使用javascript来识别客户端和meta标签,我们可以防止iPhone在input焦点上的缩放行为,同时保持缩放function的完整性。

 $(document).ready(function () { if (/iPhone/.test(navigator.userAgent) && !window.MSStream) { $(document).on("focus", "input, textarea, select", function() { $('meta[name=viewport]').remove(); $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">'); }); $(document).on("blur", "input, textarea, select", function() { $('meta[name=viewport]').remove(); $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">'); }); } }); 

似乎我们必须用blur-event上的新值replace元标记,只是要移除它似乎不会触发更新的行为。

请注意,用户界面仍在初始化缩放,但它会迅速缩小。 我相信这是可以接受的,iPhone用户必须已经习惯了浏览器在适用的情况下正在进行一些dynamic缩放。

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 

在iOS10.0.1上不再工作

font-size:16px作品

设置字体大小适用于input元素,但不适用于我select的元素。 对于select标签,当用户开始与select元素交互时,我需要主动禁用视口缩放,然后在完成后重新启用它。

 //the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens. $('select').mousedown(function(){ $('meta[name=viewport]').remove(); $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">'); }) $('select').focusout(function(){ $('meta[name=viewport]').remove(); $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' ); }) 

刚刚find一个简单的修复,如果你使用Bootstrap:

正如w3s中所提到的那样:通过将.form-group-lg添加到元素,您可以快速地将标签和表单控件放置在“水平”表单中。

 <form class="form-horizontal"> <div class="form-group form-group-lg"> <label class="control-label">Large Label</label> <div> <input class="form-control" type="text"> </div> </div> 

请参阅此页上的第二个示例: http : //www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

在iPhone SE上使用Safari和Chrome进行testing,它就像一个魅力!

所以这里是最适合我的最终解决scheme。


     @media屏幕和(-webkit-min-device-pixel-ratio:0){ 
      select,
       textarea的,
      input{
         font-size:16px!important;
       }
     }