JS 判断移动端的三种方式及使用注意事项

在 JavaScript 中，可以通过以下几种方式判断是否为移动端。 方式一：通过检测用户代理字符串（User-Agent） ```javascript function isMobileByUserAgent() { // 获取浏览器的用户代理字符串 const userAgent = navigator.userAgent; // 常见的移动设备关键字 const mobileKeywords = ['Android', 'iPhone', 'iPad', 'iPod', 'BlackBerry', 'Windows Phone']; // 遍历关键字，检查用户代理字符串中是否包含这些关键字 for (let i = 0; i < mobileKeywords.length; i++) { if (userAgent.indexOf(mobileKeywords[i])!== -1) { return true; } } return false; } // 调用函数进行测试 console.log(isMobileByUserAgent()); ``` 方式二：通过检测屏幕宽度 ```javascript function isMobileByScreenWidth() { // 获取屏幕的宽度 const screenWidth = window.innerWidth || document.documentElement.clientWidth; // 一般认为屏幕宽度小于 768px 为移动设备 return screenWidth < 768; } // 调用函数进行测试 console.log(isMobileByScreenWidth()); ``` 方式三：使用媒体查询 ```javascript function isMobileByMediaQuery() { // 创建一个媒体查询对象，查询是否为移动设备的屏幕尺寸 const mediaQuery = window.matchMedia('(max-width: 767px)'); // 返回媒体查询的结果 return mediaQuery.matches; } // 调用函数进行测试 console.log(isMobileByMediaQuery()); ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 用户代理字符串可以被伪造，因此通过 User-Agent 判断可能不准确。 2. 屏幕宽度判断方式在某些特殊设备或浏览器缩放情况下可能会出现误判。 3. 媒体查询的断点值（如 767px）需要根据实际项目需求进行调整，不同项目的移动端定义可能不同。 ######[AI写代码神器 | 470点数解答 | 2025-09-02 14:12:32]