平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“前端判断页面是在PC端还是移动端打开四种做法”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。
前言
从实现思路看，在写前端的过程里，有时候考虑适配与页面权限等问题的时候，需涉及到用户访问的设备情况，下面将介绍几种常用的判断页面是在PC端还是移动端打开的方法。
方法1. 基于 navigator.userAgent 的方法
这种方法是借助检查浏览器的 navigator.userAgent 字符串来判断设备类型。虽然这种方法不是很精确（因为 userAgent 能够被篡改），但对于大多数情况来说是足够的。
示例
function isMobile() {
const userAgentInfo = navigator.userAgent;
const mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
const mobileFlag = mobileAgents.some((mobileAgent) => {
return userAgentInfo.indexOf(mobileAgent) > 0;
});
return mobileFlag;
}
console.log(isMobile() ? '移动端' : 'PC端');
方法2. 采用媒体查询
从实现思路看，媒体查询是 CSS3 提供的一种方法，能够根据不同的设备特性应用不同的样式规则。借助 JavaScript，你能够窗口大小的变化来判断设备类型。
示例
function checkDeviceType() {
const isMobile = window.matchMedia('(max-width: 768px)').matches; // 768px 是一个常见的平板设备宽度
console.log(isMobile ? '移动端' : 'PC端');
}
// 初始检测
checkDeviceType();
// 窗口大小变化
window.addEventListener('resize', checkDeviceType);
方法3. 采用第三方库
理解这一步时，有些第三方库提供了更复杂的设备检测功能，比如 detect.js。这些库通常会提供更详细的设备信息。
示例
首先安装 detect.js:
npm install detect.js
然后在你的代码中采用：
import detect from 'detect.js';
function isMobile() {
return detect.device.type === 'phone' || detect.device.type === 'tablet';
}
console.log(isMobile() ? '移动端' : 'PC端');
方法4. 采用框架提供的工具
从实现思路看，若你采用的是像 Vue.js 这样的框架，可能会有社区提供的插件来帮助你检测设备类型。比如，在 Vue 中，你能够采用 vue-device-detect 插件。
示例
首先安装 vue-device-detect:
npm install vue-device-detect
然后在你的 Vue 组件中采用：
import { device } from 'vue-device-detect';
export default {
mounted() {
console.log(device.isMobile ? '移动端' : 'PC端');
}
}
注意事项
- 兼容性和准确性：
userAgent的检测方法可能不够准确，因为用户代理能够被篡改。 - 响应式设计：现代 Web 设计倾向于采用响应式布局，而不是依赖于设备检测。
- 性能影响：频繁地检测设备类型可能会对性能产生影响，尤其是在移动设备上。
实际处理时，在实际应用里，通常建议采用响应式设计来适应不同设备，而不是显式地检测设备类型。然而，在某些特定场景下，如需加载不同资源或提供不同的用户体验时，设备检测仍然是有用的。
附：前端移动端和PC端的区别
从实现思路看，在阿里的几次面试里，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局等方面的不同，但是还是很不系统，所以这里做一个总结。
第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器采用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
第二： 在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。
第三： 在布局上，移动端开发一般是要做到布局自适应的，我采用的一直是rem布局，感觉很好。
第四： 在动画处理上，PC端由于要考虑IE的兼容性从实现思路看，，所以通常采用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既轻松、效率又高。
第五： 微信的一些接口组好能去实现一遍，熟悉一下肯定是有好处的，比如借助微信分享文章，title、description、icon等图标的设置，这些还是要会的。
第六： 百度地图的一些API接口，也得去实现一下，这些对于移动端来说，LBS是一个很重要的特性，所以地图这块肯定是要了解的，在加上百度地图这块已经是一个比较成熟的平台了，所以学起来也比较容易。
第七： CSS3的动画一定要比较熟练，这在移动端用的还是比较多的。
第八： 一般pc端用jquery，移动端用zepto，因为移动端的流量还是比较重要的， 所以引入的资源或者插件，能小则小，一个30k的资源和一个80k的资源，在移动端的差别还是挺大的。
结合项目来看，而未压缩的jquery是262kb， 压缩的jquey是83kb，可见两者的差别之大。
第九：最好能掌握一套完整的前端开发架构，比如模块化、打包、压缩、缓存、有条件的还能够做一下自动化测试等等，比较好用的有fis，另外，想要更快提升自己的前端开发技术，钻研前端架构这块是一个很好的方向。
第十： 性能优化，包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需特别注意。
第十一： 比如在手机上的300ms的延迟，这在PC端是没有的，如果我们希望做成webapp，那么自然就不需这300ms的延迟，所以能够采用hammer-time.js来移除这300ms的延迟。
在这个场景下，总的来说，js判断手机端还是pc端适合结合实际项目边做边理解。先抓住核心思路，再逐步补上细节和边界处理，最后效果会更稳定，也更容易复用。
