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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

preventDefault()

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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