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
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录