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

先说下业务逻辑:登录页面,滑块验证,手机号码输入完成以后,会有一个滑块验证,验证正确则会收到短信验证码。这就是这个登录页面的基本逻辑。

《移动端开发IOS 6PLUS中表单输入造成的页面高度缩小bug》《移动端开发IOS 6PLUS中表单输入造成的页面高度缩小bug》《移动端开发IOS 6PLUS中表单输入造成的页面高度缩小bug》
出现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;
})

记录一下开发终于到的问题。

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

    原文作者:wangy
    原文地址: https://segmentfault.com/a/1190000018766716
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞