首页 > 移动端web页面,页面内容会随着系统键盘的隐藏而下滑,导致布局错乱

移动端web页面,页面内容会随着系统键盘的隐藏而下滑,导致布局错乱

移动端web页面,系统键盘会把html结构往上顶(这个正常),而且当页面里的input失去焦点时,页面内容会随着系统键盘的隐藏而下滑,导致布局错乱,抓包看了下dom结构未动,但是里面的内容滑下了一段距离
有没有大神帮忙解决这个bug


body,html{height:100%;width:100%;overflow:hidden}
先这样试试


是不是用了position:fixed,哈哈哈


应该就是一些简单的布局问题,找个会前端的朋友帮忙看一看嘛。


不要使用postion:fixed。。这个在iOS上和个别安卓浏览器上无解。。。


是否在js里写了和布局相关的代码?没有处理resize的情况?手机上的布局可以看看我的这篇文章,《手机html页面的垂直布局的基本框架》。


推测应该是你内容的定位出现出了问题,你看看你的position是什么,更换下试试,希望能给到你思路


html结构未动,但是里面内容错位了。手动把页面往上滑,才会恢复,求教


fixed的容器里放输入框就这样


试试在头部里面加上
<meta name="viewport" content="maximum-scale=1,user-scalable=no">
移动端的很多行为都可以同过meta控制

另外input点击会有浏览器的默认行为 试下e.preventDefault()来限制浏览器默认行为


我项目中也遇到了同样的问题,目前还没找到解决办法


我一同事写的h5页面主要基于微信平台,碰到的问题跟你的类似。我先描述一下,页面主要是评论显示区域和底部input输入框,评论区域的高度是根据不同手机高度动态计算设置,刚好把input挤到底部,所以也刚好是一整竖屏显示,测试的时候在华为和红米上出现了你所说的情况:input失去焦点后页面整体的向下移动,页面顶部空出一块区域,用手向上滑动一下就恢复了。那位同事把自己跟其他同事写的显示正常的页面比较,然后修改自己的页面就正常了。后来发现只要页面整体的产生了滑动,哪怕多1px就可以正常的隐藏输入键盘且页面显示正常。至于原因也不清楚。不知道能不能给你些参考和灵感。你后来解决了吗?


preventDefault()

【热门文章】
【热门文章】