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

guqiu 发布于2019-08-23 16:45 / 1566人阅读

摘要：出现的地方就是在上滑块无法拖动，经过检测发现是在上有这个问题。弹窗是通过定位在页面上的。当表单激活的时候，由于手机自带的输入法弹起造成页面向上滚动，会隐藏页面顶部一部分。解决方法通过的事件改变的值为。记录一下开发终于到的问题。

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

出现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;
})

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

GPU云服务器云服务器移动端页面移动端页面显示移动端html页面移动端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103239.html

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

摘要：出现的地方就是在上滑块无法拖动，经过检测发现是在上有这个问题。弹窗是通过定位在页面上的。当表单激活的时候，由于手机自带的输入法弹起造成页面向上滚动，会隐藏页面顶部一部分。解决方法通过的事件改变的值为。记录一下开发终于到的问题。先说下业务逻辑：登录页面，滑块验证，手机号码输入完成以后，会有一个滑块验证，验证正确则会收到短信验证码。这就是这个登录页面的基本逻辑。 showImg(http...

nevermind 2019-08-02 16:11 评论0 收藏0
移动端开发IOS 6PLUS中表单输入造成的页面高度缩小bug

摘要：出现的地方就是在上滑块无法拖动，经过检测发现是在上有这个问题。弹窗是通过定位在页面上的。当表单激活的时候，由于手机自带的输入法弹起造成页面向上滚动，会隐藏页面顶部一部分。解决方法通过的事件改变的值为。记录一下开发终于到的问题。先说下业务逻辑：登录页面，滑块验证，手机号码输入完成以后，会有一个滑块验证，验证正确则会收到短信验证码。这就是这个登录页面的基本逻辑。 showImg(http...

jokester 2019-08-30 15:43 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

妤锋シ 2019-08-30 13:09 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

xbynet 2019-08-01 15:58 评论0 收藏0
H5项目常见问题汇总及解决方案

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。原文链接 - https://github.com/FrontEndRo... H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备...

marser 2019-08-20 14:08 评论0 收藏0