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