index.html
<head>
<!-- 动态主题 -->
<link rel="stylesheet" name="theme" href=""/>
</head>
app.vue
created() {
// 根据手机类型（ios || android）更改主题颜色
let theme = navigator.userAgent.match(/iPhone|iPad|iPod/i) ? 'ios' : 'android';
this.importStyle(theme);
},
methods: {
importStyle(name){
let link = document.querySelector('link[name="theme"]');
let path = `static/css/${
name}.css`;// 改为您的样式文件地址
link.setAttribute("href", path);
}
}
Style file
// ios.css
#app{
color: red;
}
// android.css
#app{
color: blue;
}
Result display
