1、IOS中对带横杠的日期格式字符串进行格式化时,旧版IOS、旧版火狐浏览器会有问题:
new Date('2024-07-12')
一般处理方案用斜杠代替横杠:
let date = '2024-7-12'
new Date(date.replace(/-/g, '/'))
2、小程序通过webview访问H5出现白屏,直接访问h5正常
这种问题一般是缓存引起的,临时方案需要用户删除微信浏览缓存或移除小程序解决,长期方案可以在h5页面增加动态时间戳,让浏览器每次都访问新的h5页面
// 原始链接
https://www.baidu.com
// 增加动态时间戳让用户每次都取最新页面
`https://www.baidu.com?_t=${new Date().getTime()}`
// 如果是vue的hash模式的链接需要在search部分增加时间戳
`https://www.baidu.com/path/?_t=${new Date().getTime()}#/vue/hash`
3、部分安卓手机或IOS使用history.go(-1)返回上一页,页面不刷新,或者执行某些操作后重新跳转到该页面,预期要响应操作结果,但是页面不刷新
pageshow 事件的 event 对象还包含一个名为 persisted 的布尔值属性。如果页面中保存在bfcache中,则这个属性的值为true;否则,这个属性的值为false。
// 经测试,该方法适用ios和大部分安卓手机
// 在需要刷新的页面的setup阶段增加此事件
window.addEventListener('pageshow', function(e) {
if (e.persisted) {
window.location.reload();
}
});
4、移动端使用绝对布局时,如果内容区有滚动条,IOS会出现滚动不流畅的问题
这种情况需要在滚动元素上增加CSS -webkit-overflow-scrolling: touch 属性:
// app.css
.scroll-el {
-webkit-overflow-scrolling: touch;
}
5、旧版浏览器不支持磨砂玻璃效果
/** 磨砂玻璃效果 **/
.backdrop {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
如果是简单的替代,可以通过filter属性去替换backdrop-filter属性
6、IOS滚动出现白屏问题
// 网上说的-webkit-overflow-scrolling: touch解决不了,可以采用下面的方法,降低滚动速度解决
scrollEl.scrollTo({ top: 300, behavior: 'smooth' });
7、vite3版本的项目在ios11打开空白,配置babel.config.js,package.json的browsers,还有vite.config.js的target都未解决,最后使用官方兼容性插件:
npm i @vitejs/plugin-legacy terser -D
8、小程序中数组使用includes方法时提示没有该方法
这种情况需要给Array的原型链中添加includes方法就好了
// 处理ES6不兼容的问题includes方法的问题
if (!Array.prototype.includes) {
Array.prototype.includes = function (searchElement, fromIndex) {
let array = this;
if (!searchElement) {
console.error('unknown element in Array.includes method');
return;
}
let index = fromIndex || 0;
if (index < 0) {
index = this.length + index;
if (index < 0) {index = 0;}
}
for (let i = index; i < array.length; i++) {
if (array[i] === searchElement) {
return true;
}
}
return false;
};
9、当小程序页面包含fixed元素,里面的内容可以滚动时,如果内容滚动到底部,回弹结束后再次拉起滚动条,发现内容无法滚动,这种情况要在页面的json文件增加disableScroll为true,并且页面最外层元素要设置高度为100vh,避免出现滚动
// page.json
{
"navigationBarTitleText": "我的页面",
"disableScroll":true,
"usingComponents": {
}
}
// page.wxss
.container {
width: 100vw;
height: 100vh;
position: relative;
}
10、旧版火狐浏览器出现“ResizeObserver is not defined”的问题
这种情况一般是ResizeObserver对象缺失,需要引入resize-observer-polyfill来解决
npm install resize-observer-polyfill -S
// 在main.js全局引入
import 'resize-observer-polyfill/dist/ResizeObserver.global'
11、在旧版火狐浏览器通过创建a标签进行下载事件触发时,火狐浏览器没有响应
let url1 = URL.createObjectURL('blob文件流')
const a = document.createElement('a')
a.href = url1
const fileName = '文件名'
a.download = fileName
a.style.display = 'none'
// 火狐浏览器无响应
// a.click()
// 兼容性处理方案
let evt = document.createEvent('MouseEvents')
evt.initEvent('click', true, true)
a.dispatchEvent(evt)
// 兼容性处理方案结束
URL.revokeObjectURL(a.href)
12、IE浏览器出现flex布局错乱的问题
这种是硬伤,只能针对IE改成用float布局替换flex布局,如果要适配IE建议还是不要用flex
13、IE浏览器下写js时,定义对象时,严格模式下末尾不能有逗号
var obj = {
a: 12,
b: 13, // 错误,末尾不能有逗号
}
14、IE浏览器下不要通过let、const等定义变量,IE不支持ES6语法