移动端兼容问题汇总

序号	机型/系统	问题描述	解决方案
1	IOS	正则表达式导致的iOS进入页面白屏问题	因为iOS不支持正则的零宽断言，改成字符串切割或者其他替代方案即可
2	IOS	IOS时间格式问题	IOS的new Date日期格式不能使用YYYY-MM-DD，必须使用new Date("YYYY/MM/DD")。（第六点类似）
3	IOS	iOS点击input框导致页面放大	<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
4	IOS	h5打包iOS出现底部安全区域留白或者出现底部固定定位上下移动问题	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover,user-scalable=no">
5	IOS	input调起手机软键盘采取fixed定位在最底部的话，在安卓机上一般是正常的，但是在ios手机上会出现定位不准的问题，比如会被软键盘遮挡住,或者没有定位到软键盘正上方	input聚焦事件,聚焦后将页面滚动条滚动到页面最底部 document.body.scrollTop = document.body.scrollHeight
6	IOS	new Date()，ios规定日期要以“ / ”分割，而不能用“ - ”	改用“/”分割，例如：new Date('2023/01/01 00:00:00')
7	华为	ios端打开h5页面后，从a页面跳转到b页面，然后再返回a页面之后，a页面未刷新。	window.addEventListener   if (event.persisted    //重载页面或者刷新数据   }  })
8	IOS	视频播放，ios要求至少要有一次交互才能开始播放	1.在微信环境内可以利用微信的api（微信内置浏览器的私有对象WeixinJSBridge）实现自动播放 2.其他环境下，为了保证兼容性，一般最好有个缓冲页面，用来加载资源，并提示用户点击开始播放。 var audio = document.getElementById(xxx) document.addEventListener play = function(){     audio.play     document.removeEventListener('touchstart', play, false) } audio.play() //兼容微信 document.addEventListener('WeixinJSBridgeReady',() => {     play(); }, false)
9	IOS	点击事件的300ms延迟	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
10	Android	输入框input输入时键盘将页面顶起到止布局混乱的问题	页面初始化时计算当前页面高度，并动态绑定min-height样式即可
11	通用	canvas绘制图片模糊问题	将canvas的宽高及画的图片宽高扩大设备的物理像素，最终渲染的图片用img图片指定渲染的宽高。                 const dom = document.getElementById                 let ctx = dom.getContext                 // 像素有点虚，canvas扩大1倍画                 getPixelRation(context) {                         const backingStore = context.backingStorePixelRatio                             || context.webkitBackingStorePixelRatio                             || context.mozBackingStorePixelRatio                             || context.msBackingStorePixelRatio                             || context.oBackingStorePixelRatio                             || context.backingStorePixelRatio                        return (window.devicePixelRatio                 }                 let ratio = getPixelRation(cxt)                 ctx.width                 ctx.height                 const img = new Image()                 img.src                 setTimeout(() => {                     cxt.drawImage                     this.imgUrl = ctx.toDataURL                 }, 300)
12	Android	部分机型点击图片会放大	img{        pointer-events:none;      }
13	华为	对flex：1的兼容问题	{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: block; width: 0%; }
14	Android	低版本浏览器下vconsole空白的问题	安装依赖，resize-observer-polyfill，在main.js中引入即可
15	Android	页面加载时图片高度默认不存在	用padding-top设置百分比值来实现自适应，padding-top = (图片高度/ 图片宽度) * 100%
16	Android	input 的placeholder属性使文本位置偏上	line-height：normal
17	Android	location. reload() 安卓微信内不刷新页面 vue	this.$router.go(0)
18	通用	h5开启了定位，但无法获取定位	必须要用https开头的协议链接