解決iphone下選中input頁面自動放大的問題

今天接到了一個bug，客戶的手機站在iPhone下選中搜索框時頁面會自動變大，導致頁面變形。客戶希望我們能解決這個問題。

網上搜索了一下，大部分的答案是通過meta便籤禁用頁面縮放功能，代碼如下：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

但是有個不方便的地方，就是我們的頁面需要客戶可以手動放大，如果你需要用戶可以縮放頁面，又希望選中搜索框不自動放大，該如何呢？經過幾番思考和測試，終於找到了方案。代碼如下：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=3.0,user-scalable=yes"/> 

 var u = navigator.userAgent;
          var isIos=u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1;
       if(isIos) {
            $('input[name="keywords"]').focus(function(e){
                var mviewport;
                var metas = document.getElementsByTagName('meta')||[];
                for(var i in metas){
                  var meta = metas[i]||{},mtname = meta.name||"";
                  if (mtname.toLowerCase() == "viewport") {
                    mviewport = meta;break;
                  }
                }
                if(mviewport){
                    var metacontent=mviewport.content;
                    if(metacontent && metacontent.replace){
                        mviewport.content=metacontent.replace('user-scalable=yes','user-scalable=no');
                        setTimeout(function(){
                            mviewport.content=metacontent;
                        },2000)
                    }
                }
            })
         }