JS判断设备类型，应用不同css文件_js 如何根据设备信息,加载不同的css-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41545048/article/details/128339073

<!DOCTYPE html>
<html>
  <head>
    <title>JS判断设备类型，应用不同css文件</title>
    <link rel="stylesheet" type="text/css" href="style_A.css" />
  </head>
  <body>
    <script type="text/javascript">
      var browser = {
        versions: (function () {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          //移动设备浏览器版本信息
          return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/),  //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,//android终端或者uc浏览器      
            iPhone: u.indexOf('iPhone') > -1,//是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1,//是否iPad
            webApp: u.indexOf('Safari') == -1,//是否web应该程序，没有头部与底部
          };
        })(),
        language: (
          navigator.browserLanguage || navigator.language
        ).toLowerCase(),
      };
      if (browser.versions.mobile || browser.versions.ios 
      	|| browser.versions.android || browser.versions.iPhone 
      	|| browser.versions.iPad ) {
        cssChange();
      }
      function cssChange() {
        var link = document.getElementsByTagName('link')[0];
        //PC端应用的样式文件：style_A.css
        // alert('当前应用样式文件是：'+link.getAttribute('href'));
        link.setAttribute('href', 'style_B.css');
        //Mobile端应用样式文件：style_B.css
        // alert('当前应用样式文件是：'+link.getAttribute('href'));
      }
    </script>
  </body>
</html>