如何在javascript中检查浏览器是否处于移动状态?

160 阅读1分钟

这是一个关于如何检查浏览器设备是否为移动设备的简短教程。

在这种情况下,我们需要用JavaScript找出浏览器设备是移动设备还是桌面设备。

Javascript提供了内置的navigator 对象来了解客户端的浏览器元信息。

navigator 对象有userAgent 属性来了解浏览器的信息。

console.log(navigator.userAgent);
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"

在javascript中检查移动设备上运行的浏览器的例子

使用正则表达式,我们可以检查是否有移动浏览器,userAgent字符串包含移动设备信息。

userAgent返回移动设备信息,如:webOS,Android,iPhone,iPad,BlackBerryOpera Mini

function isBrowserMobile(){
  var isMobile=false;
  if(('ontouchstart' in document.documentElement)&&(/webOS|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
    isMobile=true;
  } else {
   isMobile=false;
  }
return isMobile
}

检查是否使用移动设备的Modernizr例子

modernizr 是一个javascript库,用于检查浏览器对前端功能的支持。

下面是一个使用Modernizr库的例子

function isBrowserMobile(){
  var isMobile=false;
  if(Modernizr.touch)&&(/webOS|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
    isMobile=true;
  } else {
   isMobile=false;
  }
return isMobile
}