H5兼容问题

wuhou123 • 2021-08-20 • H5, 前端资源 • 642 阅读

移动端

项目必备：

布局方案 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
分享
二维码
海报
H5兼容问题
移动端 项目必备： 布局方案 vw+vh rem rpx(小程序) 媒体查询@media lib-flexible 搭配 px2rem-loader 适配 fastclick处理移动端click事件300毫秒延迟 安卓/i……
<<上一篇
下一篇>>
文章目录
关闭
目 录