search

maomao1996 / daily-notes

不定期更新的日常笔记记录（零零散散啥都记系列）
https://notes.fe-mm.com/daily-notes/
57 stars 8 forks source link

判断用户为移动端设备的若干种方式 #46

Open maomao1996 opened 4 months ago

maomao1996 commented 4 months ago

判断用户为移动端设备的若干种方式

判断 userAgent

userAgent 返回当前浏览器的用户代理字符串，通常用于判断客户端使用的操作系统、浏览器或其他软件信息

function isMobileAgent() {
  const userAgent = navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod|ios|android|windows phone|blackberry|bb|playbook|opera mini|kindle|silk|fennec|mobile/.test(userAgent);
}

更全面的正则可参考 rustdesk/flutter/web/js/src/globals.js，代码简化如下

function isMobileAgent() {
  return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
}

使用 ismobilejs 库

ismobilejs 库对设备判断进行细分:

同时每个设备下还区分了

import isMobile from 'ismobilejs';

const userAgent = window.navigator;
console.log(isMobile(userAgent));
console.log(isMobile(userAgent).apple);
console.log(isMobile(userAgent).android);
console.log(isMobile(userAgent).amazon);
console.log(isMobile(userAgent).windows);
console.log(isMobile(userAgent).other);

判断视口宽度

一般来说设备的视口宽度小于 768px 即为移动端设备

function isMobileWidth() {
  return window.innerWidth <= 768 || document.documentElement.clientWidth <= 768;
}

判断 CSS 媒体查询结果

使用 max-width

function isMobileWidth() {
  return window.matchMedia('(max-width: 768px)').matches;
}

使用 any-pointer:coarse

function isMobile() {
  return window.matchMedia('(pointer: coarse)').matches;
}

// OR

function isMobile() {
  return window.matchMedia('(any-pointer: coarse)').matches;
}

使用 hover: none

function isMobile() {
  return window.matchMedia('(hover: none)').matches;
}

// OR

function isMobile() {
  return window.matchMedia('(any-hover: none)').matches;
}

集合以上判断


function isMobile() {
  return window.matchMedia('(max-width: 767px), (any-pointer: coarse), (any-hover: none)').matches;
}

判断是否支持触摸事件

maxTouchPoints 返回当前设备支持的最大同时触摸接触点数

function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}