今天接到了一个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)}}})}