前端判断设备的设备的方法

前端判断设备的设备的方法

前端判断设备的设备的方法

在前端开发中，我们经常需要根据用户的设备类型来展示不同的内容或功能。例如，我们可能需要在移动设备上展示一个简化的界面，而在桌面设备上展示一个完整的功能。为了实现这一目标，我们可以使用前端判断设备的方法。

以下是一个简单的方法，用于判断用户的设备类型：

  

const getDeviceInfo = () => {
  // 获取浏览器User-Agent字符串
  const ua = navigator.userAgent.toLowerCase();
  //先得到设备信息，然后全部转为小写
const res = {
os: 'unknown',
device: 'unknown',
isMobile: false,
isTablet: false,
isDesktop: false,
browser: 'unknown',
};
// 判断操作系统
if (ua.indexOf('android') > -1) {
res.os = 'android';
res.isMobile = true;
} else if (ua.indexOf('ios') > -1) {
res.os = 'ios';
res.isMobile = true;
} else if (ua.indexOf('ipad') > -1) {
res.os = 'ios';
res.isTablet = true;
} else if (ua.indexOf('mac os') > -1) {
res.os = 'macos';
res.isDesktop = true;
res.device = 'desktop';
res.isTablet = true;
res.isMobile = true;
res.browser = 'safari';
//判断浏览器
    if (ua.indexOf('chrome') > -1) {
      res.browser = 'chrome';
    } else if (ua.indexOf('firefox') > -1) {
      res.browser = 'firefox';
    } else if (ua.indexOf('safari') > -1) {
      res.browser = 'safari';
    } else if (ua.indexOf('opr') > -1) {
      res.browser = 'opera';
    } else if (ua.indexOf('edg') > -1) {
      res.browser = 'edge';
    }
    return res;

}

以上方法会返回一个包含用户设备信息的对象。我们可以根据这个对象的属性来判断用户的设备类型，并根据需要展示不同的内容或功能。

得到浏览器宽度

const getBrowserWidth = () => {
  return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}