客户端检测之软件与硬件检测

一 识别浏览器与操作系统

这些属性的值的初始化取决于浏览器和设备状态

属性	作用	类型	参数	例子	特殊
navigator.oscpu	通常对应用户代理字符串中操作系统/系统架构相关信息	字符串	/	例子1
navigator.vendor	通常包含浏览器开发商信息	字符串	/	例子2
navigator.platform	通常表示浏览器所在的操作系统	字符串	/	例子3
screen.colorDepth && screen.pixelDepth	返回一样的值，即显示器每像素颜色的位深	/	/	例子4	根据CSS对象模型(CSSOM)规范
screen.orientation	返回一个ScreenOrientation对象，其中包含Screen Orientation API定义的屏幕信息(属性：angle、type)	/	/	例子5

例子5：

angle：返回相对于默认状态下屏幕的角度

type：返回4种枚举值之一

• portrait-primary
• portrait-secondary
• landscape-primary
• landscape-secondary

 

例子1：

 例子2：

例子3：

 例子4：

二 浏览器元数据

作用：可以提供浏览器和操作系统的状态信息

API 1 ： Geolocation API

调用对象：navigator.geolocation 

作用：可以让浏览器脚本感知当前设备的地理位置(只在安全执行环境，通过HTTPS获取的脚本)中可用

地理位置信息的主要来源是GPS和IP地址、射频识别（RFID）、WiFi及蓝牙Mac地址、GSM/CDMA蜂窝ID以及用户输入等信息

方法：

• getCurrentPosition()
  • 作用：要获取浏览器当前的位置
    (成功回调是第一个参数，失败回调是第二个参数，PositionOptions对象是第三个参数)
  • 获取成功的返回值：一个包含坐标信息的Coordinates对象(coords))+ 一个表示查询时间的时间戳(timestamp)
    • Coordinates对象：
      • 标准格式的经度和纬度： latitude longitude
      • 以米为单位的精度：accuracy
      • 海拔高度：altitude
      • 精度值：altitudeAccuracy
      • 设备每秒移动的速度：speed
      • 朝向：heading           

// getCurrentPosition()会以position 对象为参数调用传入的回调函数 
navigator.geolocation.getCurrentPosition((position) => p = position); 
console.log(p.timestamp);  // 1525364883361 
console.log(p.coords);     // Coordinates {...} 
console.log(p.coords.latitude, p.coords.longitude);   // 37.4854409, -122.2325506 
console.log(p.coords.accuracy);                       // 58
console.log(p.coords.altitude);          // -8.800000190734863 
console.log(p.coords.altitudeAccuracy);  // 200 

• 获取失败的返回值：
  • PositionError对象：
    • 属性：
      • code：

      • 错误	定义
        PERMISSION_DENIED	浏览器未被运行访问设备位置
        POSITION_UNAVAILABLE	系统无法返回任何位置信息
        TIMEOUT	系统不能在超时时间内返回位置信息

      • message：

// 浏览器会弹出确认对话框请用户允许访问Geolocation API 
// 这个例子显示了用户拒绝之后的结果  
navigator.geolocation.getCurrentPosition( 
  () => {}, 
  (e) => { 
    console.log(e.code);     // 1 
    console.log(e.message);  // User denied Geolocation 
  } 
); 
 

// 这个例子展示了在不安全的上下文中执行代码的结果 
navigator.geolocation.getCurrentPosition( 
  () => {}, 
  (e) => { 
    console.log(e.code);     // 1 
    console.log(e.message);  // Only secure origins are allowed 
  } 
);

• PositionOptions对象：

  • 属性	定义	值
    enableHighAccuracy	设备返回精确的坐标	布尔值， true表示返回的值应该尽量精确， 默认值为false
    timeout	表示在以timeout状态调用错误回调函数之前等待的最长时间	毫秒
    maximumAge	表示返回坐标的最长有效期	毫秒

API 2: Connection State && NetworkInfomation API

API 3: Battery Status API

浏览器可以访问设备电池及充电状态的信息

navigator.getBattery()方法会返回一个期约实例，解决为一个BatteryManager对象

navigator.getBattery().then((b) => console.log(b)); 
// BatteryManager { ... }

只读属性：（提供了设备电池的相关信息）

属性	定义	类型	返回值
charging	表示设备当前是否正接入电源充电	boolean	有电池，返回true
chargingTime	表示预计离电量充满还有多少秒	int	如果电池已充满或设备没有电池，返回0
dischargingTime	表示预计离电量耗尽还有多少秒	int	如果设备没有电池，返回Infinity
level	表示电量百分比	float	电量完全耗尽返回0.0 电池充满返回1.0 如果设备没有电池，则返回1.0

事件属性：（可用于设置在相应的电池事件发生时调用的回调函数）

• onchargingchange
• onchargingtimechange
• ondischargingtimechange
• onlevelchange

navigator.getBattery().then((battery) => {  

  // 添加充电状态变化时的处理程序 
  const chargingChangeHandler = () => console.log('chargingchange'); 
  battery.onchargingchange = chargingChangeHandler; 
  // 或 
  battery.addEventListener('chargingchange', chargingChangeHandler); 

  // 添加充电时间变化时的处理程序 
  const chargingTimeChangeHandler = () => console.log('chargingtimechange'); 
  battery.onchargingtimechange = chargingTimeChangeHandler; 
  // 或 
  battery.addEventListener('chargingtimechange', chargingTimeChangeHandler); 
 

  // 添加放电时间变化时的处理程序 
  const dischargingTimeChangeHandler = () => console.log('dischargingtimechange'); 
  battery.ondischargingtimechange = dischargingTimeChangeHandler; 
  // 或 
  battery.addEventListener('dischargingtimechange', dischargingTimeChangeHandler); 
 

  // 添加电量百分比变化时的处理程序 
  const levelChangeHandler = () => console.log('levelchange'); 
  battery.onlevelchange = levelChangeHandler; 
  // 或 
  battery.addEventListener('levelchange', levelChangeHandler); 
})

三 硬件

1. 处理器核心数
   
   navigator.hardwareConcurrency属性返回浏览器支持的逻辑处理器核心数量，包含表示核心数的一个整数值
    
2. 设备内存大小
   
   navigator.deviceMemory属性返回设备大致的系统内存大小，包含单位为GB的浮点数
    
3. 最大触点数
   
   navigator.maxTouchPoints属性返回触摸屏支持的最大关联触点数量，包含一个整数值