H5页面判断PC端 or 手机端

背景

H5页面有时候会遇到这样的需求，判断当前用户，是在pc端打开链接，还是手机端访问。因此需要判断设备类型

但是不管哪个方法都不能保证100%，只好结合多种方法进行判断，以提高准确性。

可根据实际需求和未来设备的更新换代做出调整

代码实现

//使用userAgent判断
isMobileDevice() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
},
// 使用媒体查询判断
isMobileViewport() {
  return window.matchMedia("(max-width: 767px)").matches;
}，
if (this.isMobileDevice() || this.isMobileViewport()) {
  //手机或平板
  this.isMobile = true
} else {
  //PC端
  this.isMobile = false
}

问题

以上方法，在ipad上时就出问题了，按我的业务需求来说，ipad应该也走手机端的逻辑

原因

从 iOS13 开始，在 iOS13 的 iPad 设备(iPad Mini 除外)获取的 userAgent 值中不再包含“iPad”字段了，而变成了“Macintosh”字段

不严谨的解决方法

增加一个方法，判断是否ipad设备

通过最大触控点来区分 Mac 和 iPad ，当然，以后推出了触摸屏的Mac的话，这个方法就不严谨了

isIpad(){    
  return (navigator.userAgent.match(/(iPad)/) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1))
}

还有人说可以通过，Pad的屏幕高始终＞屏幕宽（不管你将屏幕竖着还是横着）,而Mac的宽＞高 这个来判断

不过这个也不是100%的，用着MacBook 并且是可以竖置的显示器