防止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的缩放?)
详细说明:
- 视口元标记设置为允许缩放
- 用户点击表单元素,更改元标记以禁用缩放
- 按完成后,视口被更改为允许缩放
如果在单击表单元素时无法更改标签,请使用模仿表单元素的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; } }