| 序号 | 机型/系统 | 问题描述 | 解决方案 |
|---|---|---|---|
| 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开头的协议链接 |