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

一识别浏览器与操作系统

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

属性	作用	类型	参数	例子	特殊
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); 
})

三硬件

处理器核心数

navigator.hardwareConcurrency属性返回浏览器支持的逻辑处理器核心数量，包含表示核心数的一个整数值
设备内存大小

navigator.deviceMemory属性返回设备大致的系统内存大小，包含单位为GB的浮点数
最大触点数

navigator.maxTouchPoints属性返回触摸屏支持的最大关联触点数量，包含一个整数值

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

Guess you like