通过判断不同的终端显示不同的页面

女爷i 2023-01-15 03:45 192阅读 0赞

## 通过判断不同的终端显示不同的页面 ##

> vue打包过后生成dist文件,对比两套生成的dist文件，将共同的css，js写在一起，不同的通过`document.write`写到文档中，当然也可以用响应式的布局，但是响应式的布局加载慢，写法麻烦后期难以维护，小页面还好大的项目的不同点太多了，几乎跟写两套没什么区别

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]

function IsPC() { 
          var userAgentInfo = navigator.userAgent;
          var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"
          ];
          var flag = true;
          for (var v = 0; v < Agents.length; v++) { 
            if (userAgentInfo.indexOf(Agents[v]) > 0) { 
              flag = false;
              break;
            }
          }
          return flag;
        }
        var flag = IsPC(); //true为PC端，false为手机端
        if (flag) { 
        //pc端引入的link
          document.write(' <link href="css/app.fa43afb7.css" rel="preload" as="style"> <link href="js/app.ae6f97da.js" rel="preload" as="script"><link href="css/app.fa43afb7.css" rel="stylesheet">')
        } else { 
          document.write('<link href="css/app.4646bd09.css" rel="preload" as="style"> <link href="js/app.0b91c116.js" rel="preload" as="script"> <link href="css/app.4646bd09.css" rel="stylesheet">')
        }
      </script>

引入js ，在这里要注意一个点，当写的是双标签的时候在结束标签的前面要加个转译字符  
`'\'`不然无效  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]: /images/20221022/8902c1c9a8b04a95a5af0203575baf59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 1]: /images/20221022/8fdb98c025d946beb14bb0b9ef19a29b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 094：vue+openlayers根据zoom的不同，显示不同的地图

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第094个 [点击查看专栏目录][Link 1]

曾经终败给现在/ 2024年04月08日 11:36/ 0 赞/ 82 阅读

相关 HTML+VUE+element-ui通过点击不同按钮展现不同页面

完整源码可以私聊我，需要一点点费用~ 页面展示方案一 ![46e15756beaa4785b1cba3ac0b70430d.png][] 方案二 ![02b

喜欢ヅ旅行/ 2024年02月29日 06:52/ 0 赞/ 33 阅读

相关控制pc端和手机端显示不同的页面

这里介绍2种方法来控制pc端和手机端显示不同的页面 1、使用nginx根据userAgent控制跳转到不同的路径或者不同的域名 set $flag 0; i

待我称王封你为后i/ 2023年10月09日 09:45/ 0 赞/ 61 阅读

相关通过判断不同的终端显示不同的页面

通过判断不同的终端显示不同的页面 > vue打包过后生成dist文件,对比两套生成的dist文件，将共同的css，js写在一起，不同的通过`document.write`

女爷i/ 2023年01月15日 03:45/ 0 赞/ 193 阅读

相关 vue通过自定义指令控制不同角色页面显示什么按钮

main.js中引入import ‘./plugins/button-check.js’ button-check.js’ import Vue from "vue

快来打我*/ 2022年11月12日 01:47/ 0 赞/ 282 阅读

相关 jstl分类讨论（不同条件下显示不同的列表）

秘笈心法：使用<c:choose>、<c:when>和<c:otherwise>标签时，必须遵循一下的语法规则： 1、<c:when>和<c:ot

超、凢脫俗/ 2022年06月17日 10:50/ 0 赞/ 247 阅读

相关 mui 点击底部菜单，显示不同的页面

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N

素颜马尾好姑娘i/ 2022年04月17日 06:45/ 0 赞/ 275 阅读

相关 linux不同终端进行通讯

1.执行ctl+shift+n 两次，打开两个终端 2.查看终端，执行tty 3.执行 echo 自定义内容 > 另一个终端所有终端进行通知，广播 4.执行shutd

逃离我推掉我的手/ 2022年04月02日 15:35/ 0 赞/ 225 阅读

相关 mac终端设置不同文件类型显示不同的颜色

打开～/.bash\_profile文件，添加如下两行命令 export CLICOLOR=1 export LSCOLORS=ExFxCxDxBxegeda

叁歲伎倆/ 2022年01月16日 10:59/ 0 赞/ 416 阅读

相关 Mac 终端不同文件显示颜色

Mac 终端不同文件显示颜色参考资料：[http://jingyan.baidu.com/article/22fe7ced2f651c3002617f20.html][ht

港控/mmm°/ 2022年01月11日 08:47/ 0 赞/ 378 阅读