H5兼容问题
移动端
项目必备:
布局方案 vw+vh rem rpx(小程序) 媒体查询@media
lib-flexible 搭配 px2rem-loader 适配
fastclick处理移动端click事件300毫秒延迟
安卓/ios兼容性问题
1、input ios光标和输入文字不居中
解决办法:
高度用padding撑开 【去掉height和line-height 使用font-size和padding撑起高度】 padding:(input实际高度-字体大小)/ 2 px
2、解决ios input失去焦点收起键盘后页面无法归位
解决办法:
document.body.addEventListener('focusout', () =>{ // 软键盘关闭事件
window.scroll(0,0) // 失焦后强制让页面归位
})
function inputBlur () {
let u = navigator.userAgent
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isIOS) {
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
}, 200)
}
}
@blur.prevent="inputBlur ()"
3、在ios使用new Date()将 ‘2021-06-14’格式的字符串转换为GMT+0800(中国标准时间)是有问题的,会转换失败。解决办法:replace(/-/g, '/') -替换成/
4、input输入框在聚焦的时候,ios有时候会出现outline或者阴影,安卓则是显示正常的。解决办法:添加样式
input: focus{ outline: none } input: { -webkit - appearance: none }
版权声明:
作者:wuhou123
链接:https://wuhou.fun/105.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
海报
H5兼容问题
移动端
项目必备:
布局方案 vw+vh rem rpx(小程序) 媒体查询@media
lib-flexible 搭配 px2rem-loader 适配
fastclick处理移动端click事件300毫秒延迟
安卓/i……

文章目录
关闭
共有 0 条评论