正文

手机还是桌面，JS轻松辨析，一招教你区分终端类型，告别兼容烦恼！

/0 浏览量
0703

在当今这个移动设备与桌面设备并存的时代，网站开发者经常需要根据不同的终端类型来调整网站的布局和功能。JavaScript（JS）作为一种强大的前端脚本语言，为我们提供了多种方法来辨别用户的终端类型。本文将详细介绍几种常用的方法，帮助你轻松区分终端类型，从而告别兼容性烦恼。

一、通过User-Agent判断

User-Agent是浏览器向服务器发送请求时附带的信息，其中包含了浏览器的名称、版本和操作系统等信息。我们可以通过解析User-Agent来判断终端类型。

1.1 获取User-Agent

var userAgent = navigator.userAgent;
console.log(userAgent);

1.2 解析User-Agent

function getBrowserType(userAgent) {
  var browserName = navigator.appName;
  var nAgt = userAgent;
  var browser = navigator.appVersion;
  var fullVersion = '' + parseFloat(nAgt) + '';
  var majorVersion = parseInt(nAgt, 10);
  var nameOffset, index;

  // IE
  if ((index = userAgent.indexOf('MSIE')) !== -1) {
    browserName = 'Microsoft Internet Explorer';
    fullVersion = browser.substring(index + 5);
  } else if ((index = userAgent.indexOf('Trident/')) !== -1) {
    browserName = 'Microsoft Internet Explorer';
    index = userAgent.indexOf('rv:');
    if (index !== -1) {
      fullVersion = userAgent.substring(index + 3);
    }
  } else if ((index = userAgent.indexOf('Edge/')) !== -1) {
    browserName = 'Microsoft Edge';
    fullVersion = userAgent.substring(index + 5);
  }

  // Chrome
  else if ((index = userAgent.indexOf('Chrome/')) !== -1) {
    browserName = 'Chrome';
    fullVersion = userAgent.substring(index + 7);
  }

  // Safari
  else if ((index = userAgent.indexOf('Safari/')) !== -1) {
    browserName = 'Safari';
    if (userAgent.indexOf('Version') > 0) {
      index = userAgent.indexOf('Version');
      fullVersion = userAgent.substring(index + 8);
    } else {
      fullVersion = userAgent.substring(index + 7);
    }
  }

  // Firefox
  else if ((index = userAgent.indexOf('Firefox/')) !== -1) {
    browserName = 'Firefox';
    fullVersion = userAgent.substring(index + 8);
  }

  // Opera
  else if ((index = userAgent.indexOf('Opera/')) !== -1) {
    browserName = 'Opera';
    fullVersion = userAgent.substring(index + 7);
  }

  // Other browser
  else if ((index = userAgent.indexOf('Opera Mini')) !== -1) {
    browserName = 'Opera Mini';
  } else if ((index = userAgent.indexOf('IEMobile')) !== -1) {
    browserName = 'IEMobile';
  }

  return {
    browserName: browserName,
    fullVersion: fullVersion,
    majorVersion: majorVersion
  };
}

var browserInfo = getBrowserType(userAgent);
console.log(browserInfo);

二、通过屏幕尺寸判断

除了User-Agent，我们还可以通过屏幕尺寸来判断终端类型。以下是一个简单的示例：

function isMobile() {
  return window.innerWidth < 768;
}

if (isMobile()) {
  console.log('This is a mobile device');
} else {
  console.log('This is a desktop device');
}

三、通过设备方向判断

在移动设备上，我们可以通过监听设备方向的变化来判断用户是横屏还是竖屏浏览。

function onDeviceOrientationChange(event) {
  if (event.orientationType === 'portrait') {
    console.log('Device is in portrait mode');
  } else if (event.orientationType === 'landscape') {
    console.log('Device is in landscape mode');
  }
}

window.addEventListener('deviceorientation', onDeviceOrientationChange);

四、总结

通过以上几种方法，我们可以轻松地判断用户的终端类型，从而为不同类型的终端提供更优的体验。在实际开发过程中，我们可以根据具体情况选择合适的方法来实现终端适配。希望本文能帮助你解决兼容性烦恼，让你的网站在各个终端上都能流畅运行。

-- 展开阅读全文 --