JS根据UA加载不同样式

最新推荐文章于 2023-10-13 17:41:08 发布

徐二斤

最新推荐文章于 2023-10-13 17:41:08 发布

阅读量1k

点赞数

分类专栏： Vue.js javascript CSS

本文链接：https://blog.youkuaiyun.com/SuperXuyuey/article/details/80394546

版权

Vue.js 同时被 3 个专栏收录

3 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

本文介绍了如何利用JavaScript根据用户的浏览器类型（User Agent，UA）来加载相应的CSS样式，实现网页的兼容性和定制化显示。通过检测UA，可以针对不同的浏览器加载特定的样式文件，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 根据UA 加载不同样式

device.js

export function device () {
  var u = navigator.userAgent
  // var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
  var isiOS = !!u.match(/(i[ ^;]+;( U;)? CPU.+Mac OS X/) // ios终端
  return isiOS
}

index.vue

<template>
  <div id="app" v-if="getDataReady">
    <div class="student-container" :class="[isIos ? 'is-ios' : 'is-andriod']">
    </div>
  </div>
</template>
<script>
import {device} from 'assets/js/device.js'
export default {
  data () {
    return {
      isIos: true
  },
  mounted () {
    if (device()) {
      this.isIos = true
    } else {
      this.isIos = false
    }
  }
}
</script>

<style lang="stylus">
.is-ios
  font-family DINCondensed-Bold
  padding-top 1.6rem
.is-andriod
  font-family MIUI_Bold
  padding-top 1.42rem
</style>