解决iphone下选中input页面自动放大的问题

最新推荐文章于 2024-08-22 12:44:34 发布

weixin_34226706

最新推荐文章于 2024-08-22 12:44:34 发布

阅读量511

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/jamesren/blog/865515

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/jamesren/blog/865515