移动端开发IOS 6PLUS中表单输入造成的页面高度缩小bug

共计 424 个字符，预计需要花费 2 分钟才能阅读完成。

先说下业务逻辑：登录页面，滑块验证，手机号码输入完成以后，会有一个滑块验证，验证正确则会收到短信验证码。这就是这个登录页面的基本逻辑。
出现 bug 的地方就是在 IOS 上滑块无法拖动，经过检测发现是在 6plus 上有这个问题。1. 弹窗是通过 fixed 定位在页面上的。2. 当表单激活的时候，由于手机自带的输入法弹起造成页面向上滚动，会隐藏页面顶部一部分。此时造成页面顶部缺失一部分，所以 fixed 定位的实际 top 距离也跟着改变，造成拖拽的滑块位置偏移到文字位置。类似于第四张图的效果，黄色部分缺失。
解决方法：通过 input 的 focus 事件改变 body 的 scrollTop 值为 0。
$(‘input’).focus(function () {
console.log($(‘body’).scrollTop())
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
})
记录一下开发终于到的问题。