Disable auto zoom/field zoom on input tags on my M

I have spent all day looking for a solution, and this site keeps coming up, SO why not ask you guys.

I an building our companies mobile website and we want to disable the auto zoom mobile devices use to zoom into text/search/email inputs when they are focused on. I am building the site in HTML5 and have seen/tested the <meta name="viewport" content="width=device-width, user-scalable=no" /> solution. With various properties (ie. minimum-scale=#, maximum-scale=#" ) This, works in almost ALL mobile devices I am testing on. Only one problem. I want the user to be able to zoom in/out at their leisure. (we have some higher res product shots that would be nice to see up close)

How can I disable zooming in when clicking on input tags, while retaining full manual user zoom control?

p.s the site also uses jQuery. So any thoughts using that might help.

thank you Jrak

标签： jquery html html5 input zoom

6条回答

霸刀☆藐视天下

2楼-- · 2019-02-01 05:53

If you set a webkit transform to any value other than 1 (or 1.0) then auto-zoom on selecting an input tag is disabled on iPhone.

document.body.style.webkitTransformOrigin= "0% 0%";
document.body.style.webkitTransform = "scale(1.1)";

I haven't tested other mobile browsers.

0人赞添加讨论(0) 举报

对你真心纯属浪费

3楼-- · 2019-02-01 06:06

It may not work exactly for your styling, but if you set the font-size of input elements to be 16px or above, the onfocus zooming will stop.

0人赞添加讨论(0) 举报

男人必须洒脱

4楼-- · 2019-02-01 06:09

See: Disable Auto Zoom in Input "Text" tag - Safari on iPhone

There's no clean way I could find, but here's a hack...

1) I noticed that the mouseover event happens prior to the zoom, but the zoom happens before mousedown or focus events.

2) You can dynamically change the META viewport tag using javascript (see Enable/disable zoom on iPhone safari with Javascript?)

So, try this (shown in jquery for compactness):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

This is definitely a hack... there may be situations where mouseover/down don't always catch entries/exits, but it worked well in my tests and is a solid start.

0人赞添加讨论(0) 举报

Animai°情兽

5楼-- · 2019-02-01 06:14

a very simple hack is to set:

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

0人赞添加讨论(0) 举报

Luminary・发光体

6楼-- · 2019-02-01 06:15

Setting the meta tag in the <head> like this worked for me:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

0人赞添加讨论(0) 举报

可以哭但决不认输i

7楼-- · 2019-02-01 06:16

It took me a while to find it but here's the best code that I found......http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});

0人赞添加讨论(0) 举报

Disable auto zoom/field zoom on input tags on my M

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间