使用vue如何判断当前设备是PC端还是移动端？

在实际开发中我们经常会遇到一个需求，就是做一个页面链接到移动端，但是要求移动端和PC端页面样式不一样，这就是要判断当前登录网页的设备是PC还是移动，那么我们就需要对当前登录设备进行判断。

使用 navigator.userAgent 字符串检测

在PC端开发完做移动端需求，仅在输入框这一个页面做不同，我就直接在核心代码中添加navigator.userAgent判断当前设备是pc端还是移动端。

可以使用navigator.userAgent属性来获取浏览器所处的环境，然后根据返回的结果进行判断；

<el-input v-if="
            navigator.indexOf('Android') != -1 ||
            navigator.indexOf('iPhone') != -1 ||
            navigator.indexOf('iPad') != -1 ||
            navigator.indexOf('iPod') != -1

判断PC端

示例代码如下：

 v-if="navigator.indexOf('Windows') != -1 || navigator.indexOf('Macintosh') != -1"

判断手机端

常见的移动设备有"Android"、“iPhone”、“iPad”、“ Phone”等几个，判断手机端，可以使用正则表达式匹配示例代码如下：

navigator.indexOf('Android') != -1 ||
            navigator.indexOf('iPhone') != -1 ||
            navigator.indexOf('iPad') != -1 ||
            navigator.indexOf('iPod') != -1"