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

最新推荐文章于 2024-10-16 15:01:35 发布

Cherries_h

最新推荐文章于 2024-10-16 15:01:35 发布

阅读量5.4k

点赞数

分类专栏：移动端文章标签：移动端页面问题 input标签获焦页面放大

本文链接：https://blog.csdn.net/qq_41802303/article/details/80513808

版权

移动端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

解决方案

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

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;
}
}
}