JavaScript 侦测手机浏览器之五术

时，前网页需知用户所乘者，乃手机浏览器抑或桌浏览器。

是文，据StackOverflow，辑JavaScript侦测手机浏览器之术五。

一、navigator.userAgent

至简之法，乃析浏览器user agent之字符串，中含设备之讯。

JS通过navigator.userAgent取此字符串，但其中含mobi、android、iphone等字，则可断为移动之器。


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

// 另一种写法
if (
  navigator.userAgent.match(/Mobi/i) ||
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // 当前设备是移动设备
}

此法之长，在简而便；其短，在不可恃，盖用户可易此字符串，使手机瀏覽器偽作案头瀏覽器也。

Chromium 之瀏覽器，復有navigator.userAgentData之屬性，亦具類似之效。所異者，乃將 user agent 字符串析為一對象，該對象之mobile屬性，返一真偽，示用戶是否用於移動設備。


const isMobile = navigator.userAgentData.mobile;

然，蘋果之 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不及五百像素，则视作机。

此法之弊，若机横持，则不可辨。

又一性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浏览器，不支此属性。

四、触之事件

四者，手机浏览器之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以媒体查询之法，为网页定应式之式。若手机之媒体查询生效，则可认当前之器为移设。

window.matchMedia()法受CSS之媒体查询为参，辨此查询是否生效。


let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

前例中，window.matchMedia()之参为一CSS查询，表唯对屏宽不逾700象素之器生效。其返一物，其matches为真值。若为true，则表查询生效，当前之器为手机。

除以屏宽辨之，亦可通过指针之精审之。


let isMobile = window.matchMedia("(pointer:coarse)").matches;

前例中，CSS之语句pointer:coarse者，今之设备指针不精也。盖手机不纳鼠标，惟容触控，故合此理。

者，或有设备兼支诸指针，若鼠标与触控并施。pointer:coarse者，惟辨主指针，复有any-pointer之令，以察众指针。


let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

前例中，any-pointer:coarse者，凡指针中一有不精，即合所询。

六、工具之包

除前法外，亦可用人所著之工包。今荐react-device-detect，其支多级之设备察也。


import {isMobile} from 'react-device-detect';

if (isMobile) {
  // 当前设备是移动设备
}

（毕）

推薦訂閱源

阮一峰的网络日志