vue安卓键盘弹起底部错位问题

最新推荐文章于 2023-03-29 15:59:24 发布
最新推荐文章于 2023-03-29 15:59:24 发布
阅读量741 收藏
点赞数
文章标签： vue 安卓
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43062742/article/details/89068588
版权

背景

vue开发一个h5页面，底部是fixed内容
step1:用fixed，发现手机键盘唤起之后，fixed内容就会上移，遮挡上面的内容
于是我粗暴的改成了absolute，苹果手机端没有问题了，但是安卓还是有问题（为什么呢，我也没深究，晚点看下什么问题）

step2：同事跟我说是我写的不对，如果高度百分百就没问题，但是我本来就是百分百的
她给我推荐了一个height：100vh。我抱着怀疑的态度试了一下，果然还是有问题。

step3：我准备监控页面高度，页面高度变化的时候，就将下面的模块隐藏起来。
代码之后补上

weixin_43062742
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
10-16
今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
毫米波雷达-FMCW基本原理一
weixin_40378598的博客
07-22 4114
欢迎留言交流
Vue ；pc端使用 vw/vh 实现自定义布局
weixin_60196946的博客
03-29 1253
vw/vh 实现自定义布局
移动端vh布局软键盘弹起改变高度问题
weixin_41674235的博客
10-10 1403
问题描述 在移动端使用vh布局。当页面中包含input、textarea输入框的时候，或者有调起软键盘的操作时，安卓浏览器下，可视窗口的高度改变，导致页面上的vh重新计算，页面被压扁。ios下的浏览器（safari）没有这个问题。 原因 在ios下，软键盘是叠在可视窗口上面的，也就是不影响可视窗口的大小。但是在安卓，软键盘是在窗口中，即占用窗口的面积。 解决方案 理论：给viewport设置height值，可用window.innerHeight赋值。旋转的时候重新设置 <meta name="vie
vue项目，h5登录页面,手机上键盘弹起把背景图也顶起来了。解决办法
qq_36165747的博客
12-20 5418
.user-container{  position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: url("../../static/imgs/bgi.png") no-repeat; background-size:cover; } .form { position: relative...
Vue移动端点击输入框，弹出键盘，底部被顶起的问题
初辰的博客
07-26 3882
Vue开发中，当我们相对于父视图的底部布局子控件时，需要用positionfixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框，弹出键盘时，底部固定定位的子控件就会被顶起来。这个问题在iOS端不会出现，在安卓端会出现。...
移动端IOS H5（VUE）界面被键盘顶起，键盘收起后无法恢复正常
hxing1923439601的博客
11-21 2244
做一个轻应用，链接到公众号里面，却发现了一些扎心的问题....... 用户总是反馈说我们的界面不好看，空间也空出来一大块，浪费还不好看，一堆被吐槽，心累，关键是我自己怎么看怎么都是正常的，结果.......他们用的是iPhone，唉，是我太穷了.......好了，回归正题 产品是这样的，进去的第一个界面就是登录页，所以首先就会去点击输入框，然后blab...
vue移动端安卓软键盘弹出底部按钮顶起
qq_38096835的博客
08-04 954
这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面 一、显示隐藏处理 监听页面高度 data() { return { docmHeight: document.documentElement.clientHeight ||document.body.clientHeight, showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
解决vue js IOS H5focus无法自动弹出键盘的问题
10-18
今天小编就为大家分享一篇解决vue js IOS H5focus无法自动弹出键盘的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Android软键盘弹出覆盖h5页面输入框问题
08-27
之前我们在使用vue进行 h5 表单录入的过程中，遇到了Android软键盘弹出，覆盖 h5页面 输入框 问题，在此进行回顾并分享给大家,感兴趣的朋友跟随脚本之家小编一起学习吧
vue 解决文本框被键盘遮住的问题
10-16
今天小编就为大家分享一篇vue 解决文本框被键盘遮住的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue移动端弹起蒙层滑动禁止底部滑动操作
10-15
主要介绍了vue移动端弹起蒙层滑动禁止底部滑动操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
AX3_Mercadopago-0.3.7-py3-none-any.whl.zip
04-15
AX3_Mercadopago-0.3.7-py3-none-any.whl.zip
Acquisition-4.11-cp310-cp310-manylinux_2_5_x86_64.whl.zip
04-15
Acquisition-4.11-cp310-cp310-manylinux_2_5_x86_64.whl.zip
AX3_model_extras-1.4.0-py3-none-any.whl.zip
04-15
AX3_model_extras-1.4.0-py3-none-any.whl.zip
【pythonWEB自动化-01课-驱动】
最新发布
04-15
【pythonWEB自动化-01课-驱动】
AXX_AIAPI-1.3.0-py3-none-any.whl.zip
04-15
AXX_AIAPI-1.3.0-py3-none-any.whl.zip
vue3 h5 监听键盘的弹起与收起
04-18
对于vue3 h5监听键盘的弹起与收起，我们可以使用window对象的resize事件和document对象的focusin和focusout事件来实现。具体方法可以参考以下代码： // 监听键盘弹起函数 function onKeyboardShow() { //...处理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值