发表新帖
发表新帖

Disable zoom on input focus in Android webpage

后端 未结
关注
30 1204
日久生厌
日久生厌 2020-12-02 05:17

Here\'s the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I

相关标签:
30条回答
  • 小鲜肉
    2020-12-02 05:56

    add this meta tag to your html file and it will solve the issue.

    <html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0' ></head><body>html code</body></html>
    0 讨论(0)
  • 梦谈多话
    2020-12-02 05:56

    Working Model

    We have this working on Android. Here is the key: the font-size on the input must be the proper size. If you're page is 320px wide then you need 16px font size. If you're size is 640px then you need 32px font size.

    In addition you need the following

    320 wide version

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

    640 wide version

    <meta name="viewport" content="width=640, initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />

    NOTE: THIS DOES NOT CONTAIN THE USER SCALABLE ATTRIBUTE. THAT WILL BREAK IT.

    0 讨论(0)
  • 無奈伤痛
    2020-12-02 05:56

    If you set font size of input to 16px the zoom stops. Mobile browsers assume anything less than 16px means the users will need to zoom so why don't i do it myself.

     input[type='text'],input[type='number'],textarea {font-size:16px;}
 body{ -webkit-text-size-adjust:none;}

    You may also set the below meta tag but it prevent user scaling completely.

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

    If you want user scaling but only disable input scaling try this 

    $("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" />');
}

    also try this

    0 讨论(0)
  • 半阙折子戏
    2020-12-02 05:56

    Perhaps you could avoid zoom, by resetting the zoom scale to 1.0? On my Android (HTC Wildfire S), I'm able to reset zoom to 1.0 like so:

    $('meta[name=viewport]').attr('content',
         'initial-scale=1.0, maximum-scale=0.05');

    but this moves the viewport to 0, 0 (the upper left corner of the page). So I $().scrollLeft(...) and .scrollTop(...) back to the form again.

    (initial-scale=1.0, maximum-scale=0.05 is my initial value of the viewport meta.)

    (The reason I do this is not to prevent Android from zooming, but rather to reset the zoom to a known scale, because of other Android bugs that otherwise corrupt screen.width and other related values.)

    0 讨论(0)
  • 时光说笑
    2020-12-02 05:58

    By accident I discovered that this:

     input {
     line-height:40px;
 }

    will prevent zoom on input on my Galaxy Nexus with Chrome for Android version 18 although that might be specific to my case:

    <meta name='viewport' data='width=800'>

    so for future reference, if you come here via google, this may be one of other solutions.

    0 讨论(0)
  • 离开以前
    2020-12-02 05:58

    I had the same problem (only in Android chrome browser). I solved the issue like this.

    1. Detected the userAgent, and bind the onFocus and onBlur events of the text fields to change the viewport meta content as follows

      if ((navigator.userAgent.match(/Android/i)) && (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
isAndroidChrome = true;    
}
var viewportmeta = document.querySelector('meta[name="viewport"]');

    2. onFocus of the text field, I set the following viewport meta content viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';

    3. onBlur of the text field, I am resetting the viewport meta content to viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4'; you can set the maximum-scale if you wish, or if you want it to be user-scalable, don't set maximum-scale

    When you change the trigger the onFocus event of the input, if the maximum-scale is 1, it doesn't zoom in. This worked for me like a charm. Hope it works for you too.

    0 讨论(0)
 看不清?
提交回复
热议问题