vue2-nuxt
移动端页面软键盘挤压页面
页面中使用了input输入框一点击输入框页面就被挤压
在网上找了很多办法都没有解决有高人吗可有¥解决
vue2移动端软键盘挤压页面如何解决
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
3条回答 默认 最新
- CodeBytes 2023-02-06 11:53关注
为了解决软键盘挤压页面的问题,可以试试以下解决方法:
1.将 input 输入框放在页面最上方,这样就不会被挤压了。
2.在 meta 标签中加入以下代码:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
- 在组件内添加以下代码:
mounted() { window.addEventListener("resize", this.resize) }, beforeDestroy() { window.removeEventListener("resize", this.resize) }, methods: { resize() { this.isMobile = window.innerWidth <= 768 } }
4.置 input 输入框的样式
input { padding: 10px; border-radius: 5px; outline: none; box-sizing: border-box; border: 1px solid #ccc; }
解决 无用评论 打赏 举报
悬赏问题
- ¥15 Stable Diffusion视频动画制作时,第一步蒙版生成报错怎么处理啊,蒙版和帧图没法生成
- ¥15 请把下列每一行代码完整地读懂并注释出来
- ¥15 pycharm运行main文件,显示没有conda环境
- ¥15 易优eyoucms关于二级栏目调用的问题
- ¥15 寻找公式识别开发,自动识别整页文档、图像公式的软件
- ¥15 为什么eclipse不能再下载了?
- ¥15 编辑cmake lists 明明写了project项目名,但是还是报错怎么回事
- ¥15 关于#计算机视觉#的问题:求一份高质量桥梁多病害数据集
- ¥15 特定网页无法访问,已排除网页问题
- ¥50 如何将脑的图像投影到颅骨上