手机浏览器点击input,textarea页面放大,导致页面左右可移动问题

       android上面的浏览器,点击网页上的文本输入框input,获取焦点的时候,系统输入法会弹出,若文本框的位置在输入法框的位置之上,输入法框不会把页面顶上去,若文本框的位置在输入法框的位置之下(即输入法弹出来会覆盖文本框),输入法会把文本框顶上去。系统输入法会弹出,文本框获得焦点,会自动把网页放大。除了input外,还有textarea、select标签获取焦点时,可能浏览器会认为只有input中的字体大于等于16px时用户才能看得清楚。

 解决方案

  1、尝试了在页面头部<head>标签内加入meta,禁止用户缩放的特性,但是没有起作用

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

 2、终极解决方案,给input、select、textarea这类标签,加入获取焦点时的字体大小,给它设定为最高权限

   @media screen{

@media (min-device-width:1078px){
            input:focus,textarea:focus {
   font-size: 18px !important;
   }
}


@media (min-device-width : 320px) and (max-device-width : 1077px){
            input:focus,textarea:focus {
   font-size: 16px !important;
   }
}
}

猜你喜欢

转载自blog.csdn.net/qq_41802303/article/details/80513808