【前端】ios下获得焦点之后,页面布局上移了一段
用ios打开测试,文本框获得焦点时,有很大几率导致整个页面上移了一部分,导致头部的工具栏被遮挡了。Android则下正常。
还有一个问题,IOS中在页面的body上滑动时,顶部的系统url显示栏目会存在缩放现象(页面向上活动时,url栏目会变小,下移时则又变大,有没有方法固定一下大小)。
求各位指教
回答
function androidInputBugFix(){ // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
// 相关 issue: https://github.com/weui/weui/issues/15
// 解决方法:
// 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
// 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
// Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
}
}
在ios里面,当一个文本框的样式为fixed时候,如果卖QQ靓号地图这个文本框获得焦点,它的位置就会乱掉,由于ios里面做了自适应居中,这个fixed的文本框会跑到页面中间。
更多相关文章
- 【前端】多页面有重复的html代码,怎么解决呢?
- 使用定位、flex与grid布局仿酒仙网手机端页面
- 【前端】手机端页面购物车功能JS如何实现产品数量,商品价格去相加
- 【前端】如何阻止ios微信下双击屏幕向上滑的问题
- iframe高度自适应的方法
- iframe获取子级和父级元素
- 使用flex、grid跟定位布局仿一个简易的淘宝手机端静态页面
- 仿smzdm移动端首页
- 制作简易模态框登录页面及flex与grid整理总结