手机访问网页，调用文件路径自动改变

Question

发现现在很多网站。调用cssjs文件。不同设备，调用文件路径自动改变，样式随之响应式变化，域名不发生变化。举例如下：

pc访问默认引用路径：
/style/index/css.css
手机访问路径自动变为：
/style/m/css.css
ipad访问路径自动变为：
/style/ipad/css.css

请问如何做的，谢谢。

---

**目前几位说的都不对啊，
是网页根据不同设备引用不同路径css或js文件，不是js判断跳转。
也不是media媒体查询之类的。**

-------20191124
谢谢各位的回答，都没回答到点子上。可能是我描述不严谨、不到位，还是谢谢各位。
1-不是css的media 媒体查询
2-肯定不是js的userAgent
我问这个问题的原因就是我看不出来他们怎么做的，能看出来了我肯定不会来问各位了对不对？
各位说的这2个办法真的是基础，大家都会，如果是这样做的一眼都看出来了，也别说反混淆加密什么的，肯定没有。所以我也想明白了，可能不是前端的问题，是后端操作的。
总之还是谢谢各位。有哪位朋友看出来了，可以说下，感谢~！

Answer 1

你光说“不对”又不说你从哪看出来不是别人说的那样，对解决问题没有太大帮助。

我的猜测是八成是UA，UA不光可以从前端获取还可以从后端获取，因为UA就是HTTP的User-Agent头部字段而已。对于后端来说，被动获取客户端设备/浏览器的唯一方法就是通过UA；除此之外基本靠猜或前端辅助。另外我不知道HTML支不支持类似的根据浏览器加载不同资源，这个我不是很了解，觉得有可能的话你就去看看网站HTML源码的头部。

Answer 2

在Http协议中，有个叫User-Agent的属性。
浏览器中，navigator.userAgent可以获取当前浏览器User-Agent。

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('Adr') > -1, //android终端
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

Answer 3

做页面顶部做一个判断的JS

var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

    if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        // mobile
         
        document.write("<``script``type=\"text/javascript\" src=\"http://www.**.com/m/*.js\"></``script``>");
    }else if(bIsIpad){
        // IPAD
       
         document.write("<``script``type=\"text/javascript\" src=\"http://www.**.com/ipad/*.js\"></``script``>");
    }else{
        // PC
         document.write("<``script``type=\"text/javascript\" src=\"http://www.**.com/pc/*.js\"></``script``>");
    }

Answer 4

最简单的方法就是通过媒体查询判断屏幕大小来加载不同的CSS文件

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)" />
<link rel="stylesheet" href="ipad.css" media="screen (min-width: 768px) and (max-width: 992px)" />
<link rel="stylesheet" href="pc.css" media="screen and (min-width: 992px)" />

当然，你也可以通过JavaScript来判断User-Agent来更精确的实现。

Answer 5

Javascript 能做什么？