区别移动端和PC不同浏览器从同一域名访问后自动重定向到不同网页（PC和移动端两套不同代码）

最新推荐文章于 2023-04-29 16:20:05 发布

春风欲雨

最新推荐文章于 2023-04-29 16:20:05 发布

阅读量1.4k

点赞数

分类专栏： vue JS 文章标签：重定向区别PC和移动获取浏览器信息判断是PC端还是移

本文链接：https://blog.csdn.net/WebDestiny/article/details/100116078

版权

vue 同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

15 篇文章 2 订阅

订阅专栏

<script type="text/javascript">
if(/Android|webOS|iPhone|ipod|BalckBerry/i.test(navigator.userAgent)){
window.location.href="移动端地址"
console.log(/Android|webOS|iPhone|ipod|BalckBerry/i.test(navigator.userAgent),'移动端');
}
else{
window.location.href="PC端地址";
console.log(/Android|webOS|iPhone|ipod|BalckBerry/i.test(navigator.userAgent),'pc端');
}
</script>

Navigator 对象

Navigator 对象包含有关浏览器的信息。

注意： 没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

Vue-cli中只需要在index.html中加入该代码即可！

原理：在页面加载该HTML文件的时候，由于代码是从上至下加载，故而在加载页面元素之前，会首先执行该代码行，通过navigator.userAgent获取浏览器的用户代理头（https://baike.baidu.com/item/%E7%94%A8%E6%88%B7%E4%BB%A3%E7%90%86/1471005），然后使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等，返回的结果例如：

Mac

Macintosh; PPC Mac OS X

Macintosh; Intel Mac OS X

Windows:

Windows NT 10.0 对应操作系统windows 10

windows NT 6.2 对应操作系统 windows 8等等......

然后通过正则判定是否包含移动端标识相关的关键字，true:则为移动端，否则为PC端，然后分别重定向到不同的页面即可，记得要加http否则一般会有404错误