发表新帖
发表新帖

Disable auto zoom/field zoom on input tags on my Mobile Site - WITHOUT disabling all zoom capabilities

后端 未结
关注
6 1092
迷失自我
迷失自我 2020-12-24 11:54

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 disabl

相关标签:
6条回答
  • 后悔当初
    2020-12-24 12:11

    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)
  • 我寻月下人不归
    2020-12-24 12:17

    a very simple hack is to set:

    input, textarea {font-size:16px;}
    0 讨论(0)
  • 夕颜
    2020-12-24 12:24

    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)
  • 忘掉有多难
    2020-12-24 12:29

    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)
  • 有刺的猬
    2020-12-24 12:33

    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)
  • 长情又很酷
    2020-12-24 12:38

    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)
 看不清?
提交回复
热议问题