@simplex2-sdk-util/device

v0.0.3

Published

a year ago

`Device` 类用于识别当前设备和浏览器类型，并根据配置自动为指定的HTML元素（默认是`<body>`）添加相应的CSS类。这有助于前端开发者根据不同的设备和浏览器进行样式定制。

Downloads

0High
0Medium
0Low

yangguifang

simplex2-sdk-util device

Device 类使用说明

简介

Device 类用于识别当前设备和浏览器类型，并根据配置自动为指定的HTML元素（默认是<body>）添加相应的CSS类。这有助于前端开发者根据不同的设备和浏览器进行样式定制。

安装与引入

假设你已经通过npm或其他方式安装了该库，可以通过以下方式引入：

npm i @simplex2-sdk-util/device

import Device from '@simplex2-sdk-util/device';

使用方法

初始化 Device 实例

创建 Device 类的实例时，可以传入一个可选的配置对象来覆盖默认设置。

const device = new Device({
    appendDeviceClass: true, // 是否添加设备类，默认为true
    appendBowserClass: true, // 是否添加浏览器类，默认为true
    classPrefix: 'device-',  // 类名前缀，默认为'device-'
    classSuffix: '',         // 类名后缀，默认为空
    appendPosition: 'body',  // 添加类的目标元素，默认为'body'
    deviceNameDic: DEFAULT_DEVICE, // 自定义设备名称字典，默认使用内置字典
    browserNameDic: DEFAULT_BOWSER // 自定义浏览器名称字典，默认使用内置字典
});

获取设备类型
Device 类会自动识别当前设备类型，并返回对应的字符串。你可以通过 getDevice 方法手动获取设备类型。
```
console.log(device.getDevice()); // 输出如 'iPhone', 'iPad', 'Android', 'PC' 或 'UNKNOWN'
```

获取浏览器类型

类似地，你可以通过 getBrowser 方法获取当前浏览器类型。

console.log(device.getBrowser()); // 输出如 'IE', 'FIREFOX', 'CHROME', 'SAFARI' 或 'UNKNOWN'

自定义设备和浏览器名称字典

如果你需要扩展或修改默认的设备和浏览器名称字典，可以在初始化时传入自定义字典。

const customDeviceDic = {
    ...DEFAULT_DEVICE,
    'NEW_DEVICE': 'NewDevice'
};

const customBrowserDic = {
    ...DEFAULT_BOWSER,
    'NEW_BROWSER': 'NewBrowser'
};

const device = new Device({
    deviceNameDic: customDeviceDic,
    browserNameDic: customBrowserDic
});

添加类到指定元素
默认情况下，Device 类会在初始化时将识别到的设备和浏览器类添加到 <body> 元素中。如果你希望将类添加到其他元素，可以通过配置 appendPosition 属性来指定目标元素的选择器。
```
const device = new Device({
    appendPosition: '#my-element' // 将类添加到id为'my-element'的元素中
});
```
获取设备信息
getDeviceInfo 方法整合了设备、浏览器、屏幕和操作系统的信息，以对象的形式返回。
```
console.log(device.getDeviceInfo());
```
获取屏幕信息
getScreenInfo 方法用于获取当前屏幕的宽度和高度信息。
```
console.log(device.getScreenInfo());
```
获取操作系统信息
getOsInfo 方法用于获取当前浏览器运行的操作系统平台信息。
```
console.log(device.getOsInfo());
```

配置选项

| 参数名 | 类型 | 描述 | 默认值 | | ------------------ | -------- | ------------------------------------------ | ---------------- | | deviceNameDic | Object | 设备名称字典 | DEFAULT_DEVICE | | browserNameDic | Object | 浏览器名称字典 | DEFAULT_BOWSER | | classPrefix | string | 添加类名的前缀 | 'device-' | | classSuffix | string | 添加类名的后缀 | '' | | appendDeviceClass| boolean | 是否添加设备类 | true | | appendBowserClass| boolean | 是否添加浏览器类 | true | | appendPosition | string | 添加类的目标元素的选择器 | 'body' |

注意事项

Device 类依赖于浏览器的 navigator.userAgent 进行设备和浏览器类型的识别，因此在非浏览器环境中可能无法正常工作。
如果需要更精确的设备和浏览器识别，建议结合其他第三方库或服务。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Device Detection Example</title>
   <style>
      .device-iPhone { background-color: red; }
      .device-iPad { background-color: blue; }
      .device-Android { background-color: green; }
      .device-PC { background-color: yellow; }
   </style>
</head>
<body>
<script type="module">
   import Device from '@simplex2-sdk-util/device';

   const device = new Device();
</script>
</body>
</html>

以上是 Device 类的基本使用说明，希望对你的项目有所帮助！如果有任何问题或建议，请随时联系开发者。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme