企业官网建设流程全解析

在前端开发中，判断用户设备（如桌面、平板或手机）通常通过检测 用户代理（User Agent）、屏幕尺寸 或 触摸支持 等特性来实现。

1. 通过 navigator.userAgent 检测

用户代理字符串包含设备信息（但可能被篡改或过时）：

constuserAgent=navigator.userAgent.toLowerCase();constisMobile=/iphone|ipod|android|blackberry|windows phone/g.test(userAgent);constisTablet=/(ipad|tablet|playbook|silk)|(android(?!.*mobile))/g.test(userAgent);constisDesktop=!isMobile&&!isTablet;console.log({isMobile,isTablet,isDesktop});

缺点：用户代理可能被修改，且新设备（如折叠屏）可能无法准确识别。

2. 通过屏幕宽度断点（响应式设计）

结合 CSS 媒体查询和 JavaScript 判断：

// 匹配 CSS 中的断点（例如 Bootstrap 的标准）constisMobile=window.matchMedia('(max-width: 767px)').matches;constisTablet=window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches;constisDesktop=window.matchMedia('(min-width: 1025px)').matches;console.log({isMobile,isTablet,isDesktop});

优点：与响应式设计一致，适应不同屏幕。

3. 检测触摸支持

触摸设备可能是手机或平板：

constisTouchDevice='ontouchstart'inwindow||navigator.maxTouchPoints>0;console.log('Is touch device:',isTouchDevice);

注意：部分笔记本也支持触摸，需结合其他方法。

4. 使用现成库

• MobileDetect.js：轻量级用户代理解析库。

  constmd=newMobileDetect(window.navigator.userAgent);console.log({isMobile:md.mobile(),isTablet:md.tablet(),os:md.os()// 如 'iOS', 'Android'});

• Platform.js：提供更详细的设备信息。

5. 检测设备方向（可选）

constisPortrait=window.matchMedia('(orientation: portrait)').matches;console.log('Is portrait:',isPortrait);

6. 最佳实践建议

1. 优先使用响应式设计：通过 CSS 媒体查询适配布局，而非依赖设备检测。

   /* 示例：手机与桌面样式分离 */@media(max-width:767px){.mobile-hidden{display:none;}}

2. 功能检测优先：如检测触摸支持（ontouchstart）而非直接判断设备类型。
3. 动态适配：监听窗口大小变化（resize 事件）或设备旋转。

   // Vue 3 Composition API 示例import{ref,onMounted}from'vue';exportdefault{setup(){constdeviceType=ref('');constdetectDevice=()=>{if(window.matchMedia('(max-width: 767px)').matches){deviceType.value='mobile';}elseif(window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches){deviceType.value='tablet';}else{deviceType.value='desktop';}};onMounted(()=>{detectDevice();window.addEventListener('resize',detectDevice);// 监听窗口变化});return{deviceType};}};

7. 补充 UniApp 判断用户设备

1. uni.getSystemInfoSync()获取设备信息（推荐）

   exportdefault{data(){return{deviceType:''};},onLoad(){this.detectDevice();},methods:{detectDevice(){constsystemInfo=uni.getSystemInfoSync();const{windowWidth,platform}=systemInfo;if(windowWidth<768){this.deviceType='mobile';}elseif(windowWidth>=768&&windowWidth<=1024){this.deviceType='tablet';}else{this.deviceType='desktop';}// 额外判断平台（如微信小程序、H5、App）console.log('Platform:',platform);// "ios", "android", "h5", "mp-weixin" 等}}};

2. uni-app 条件编译

   // #ifdef H5constisMobile=/iphone|ipod|android/g.test(navigator.userAgent.toLowerCase());// #endif// #ifdef MP-WEIXINconstisMobile=true;// 微信小程序默认是移动端// #endif

3. 使用 @dcloudio/uni-device
   安装：

   npminstall@dcloudio/uni-device

   使用：

   import{isMobile,isTablet,isDesktop}from'@dcloudio/uni-device';exportdefault{computed:{deviceType(){if(isMobile)return'mobile';if(isTablet)return'tablet';return'desktop';}}};