js判断ios系统还是android系统 并修改组件样式
- 在跨平台、浏览器、移动设备兼容的时候,要根据终端设备的浏览器内核做特定调整,判断Android还是iOS,通过
navigator.userAgent.toLowerCase() 可以进行判断。
- navigator是HTML中的内置对象,包含浏览器的信息;userAgent是navigator的属性方法,可以返回由客户机发送服务器的头部的值,作用其实就是就是返回当前用户所使用的是什么浏览器,toLowerCase()是将转换为小写。
export default {
methods: {
check() {
let styleElement = document.getElementById('scrollContainer');
let ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf("android") !== -1) {
alert('android');
styleElement.style.cssText = " height: calc(100vh - 80px);";
} else {
alert('ios');
styleElement.style.cssText = " height: calc(100vh - 160px);";
}
},
},
created() {
setTimeout(() => {
this.check();
}, 5);
},
};
- 可以看到在vue初始化created()函数中,使用了延时,由于vue在初始化时,DOM还未生成,$el属性还不存在(详情参考vue生命周期函数),不能实例化style样式,通过setTimeout()延时函数等vue的生命周期结束再加载即可修改样式。