JavaScript 侦测手机浏览器的五种方法_navigator(1)，2024年最新大数据开发工作经验6年

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

注意，苹果的 Safari 浏览器和 Firefox 浏览器都不支持这个属性，具体情况可以查看 ​ ​Caniuse 网站​​。

此外，还有一个已经废除的navigator.platform属性，所有浏览器都支持，所以也可以用。它返回一个字符串，表示用户的操作系统。

if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) {
  // 当前设备是移动设备
}

二、window.screen，window.innerWidth
另一种方法是通过屏幕宽度，判断是否为手机。

​​window.screen​​对象返回用户设备的屏幕信息，该对象的​​width​​属性是屏幕宽度（单位为像素）。

if (window.screen.width < 500) {
  // 当前设备是移动设备 
}

上面示例中，如果屏幕宽度​​window.screen.width​​小于500像素，就认为是手机。

这个方法的缺点在于，如果手机横屏使用，就识别不了。

另一个属性​​window.innerWidth​​返回浏览器窗口里面的网页可见部分的宽度，比较适合指定网页在不同宽度下的样式。

const getBrowserWidth = function() {
  if (window.innerWidth < 768) {
    return “xs”;
  } else if (window.innerWidth < 991) {
    return “sm”;
  } else if (window.innerWidth < 1199) {
    return “md”;
  } else {
    return “lg”;
  }
}
三、window.orientation
第三种方法是侦测屏幕方向，手机屏幕可以随时改变方向（横屏或竖屏），桌面设备做不到。

​​window.orientation​​属性用于获取屏幕的当前方向，只有移动设备才有这个属性，桌面设备会返回​​undefined​​。

if (typeof window.orientation !== ‘undefined’) {
  // 当前设备是移动设备 
}
注意，iPhone 的 Safari 浏览器不支持该属性。

四、touch 事件
第四种方法是，手机浏览器的 DOM 元素可以通过​​ontouchstart​​属性，为​​touch​​事件指定监听函数。桌面设备没有这个属性。
function isMobile() { 
  return (‘ontouchstart’ in document.documentElement); 
}

// 另一种写法
function isMobile() {
  try {
    document.createEvent(“TouchEvent”); return true;
  } catch(e) {
    return false; 
  }
}
五、window.matchMedia()
最后一种方法是结合 CSS 来判断。

CSS 通过 media query（媒介查询）为网页指定响应式样式。如果某个针对手机的 media query 语句生效了，就可以认为当前设备是移动设备。

​​window.matchMedia()​​方法接受一个 CSS 的 media query 语句作为参数，判断这个语句是否生效。

let isMobile = window.matchMedia(“only screen and (max-width: 760px)”).matches;
1.
2.
上面示例中，​​window.matchMedia()​​的参数是一个 CSS 查询语句，表示只对屏幕宽度不超过 700 像素的设备生效。它返回一个对象，该对象的​​matches​​属性是一个布尔值。如果是​​true​​，就表示查询生效，当前设备是手机。

除了通过屏幕宽度判断，还可以通过指针的精确性判断。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

1713300462005)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！