前端如何动态判断访问者是PC访问还是app手机访问

在前端开发中，一个好的网站，一定是布局好看，前期开发时，都会以单个尺度进行布局，比如使用PC浏览器进行调试样式，当网站上线后。会遇到这么一个尬尴的场景，有一个访问者在PC浏览器上了你的网站，发现你的网站很不错，然后使用QQ或微信等聊天工具分享了你的网站地址。这个时候，访问者的朋友正在玩手机，收到后，肯定当场打开。结果就是，一个布局很乱的网站，看一眼就关闭了。原因是什么？就是网站是以PC大屏幕布局的，而手机是小型机，在一些固定大小的样式在手机上，很容易被挤压而使得布局很乱。

当然，你可以再布局一套适合手机端大小的网站出来，但前提是，你怎么知道访问者是用PC浏览器访问还是用手机访问？这时候，你就可以加上下面这段代码，获取到你所需要的结果。

let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
if (flag) {
 console.log("手机端");
 
 // this.$router.replace(url);
} else {
 console.log("pc端");
 
 // this.$router.replace(url);
}

建议：这种判断，最好放在一处地方进行处理，不要在所有页面都加这个判断，本论坛前端采用的是VUE开发，把判断放在钩子上，在每次路由时，都会进行判断一次，然后动态分配路由。比如PC的人分享了PC的网址，在你手机上点开时，就会自动路由到手机上的网址，反之也一样。这样就解决了PC与APP之间的访问交互。有一处需要注意，并不是只在首页做一个判断就可以的，虽然这么做，正文的访问入口分开样式是没问题的，但网站是可以经过用户分享的，网站地址分享可能是你网站中任意一个地址。所以还是建议在每次访问时都做判断，因为不是调用第三方，所以是不会影响你的性能的。