@simplex2-sdk-util/device NPM

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 类的基本使用说明，希望对你的项目有所帮助！如果有任何问题或建议，请随时联系开发者。

simplex2-sdk-util device

gulp gulp-minify readable-stream

0.0.3

7 months ago

0.0.2

7 months ago

0.0.1

7 months ago