介绍
browser-platform 是一个 npm 包，它是用于检测当前页面所在的浏览器平台的工具。根据浏览器特性和 UserAgent 等参数，它可以帮助我们区分出当前页面所在的浏览器平台，例如 PC，移动设备等等。
在某些场景下，我们需要知道当前页面所在的浏览器平台，例如适配不同平台的布局，加载不同版本的资源等等。使用 browser-platform 无疑是一个轻松、快速的方式。
安装
可以通过 npm 安装：
npm install browser-platform --save
也可以通过 yarn 安装：
yarn add browser-platform
使用
使用非常简单，只需要引入包并调用方法即可。
1、通过 CommonJS 引入
使用时，只需调用 detect() 方法即可。它将返回一个包含 device 和 os 两个属性的对象，分别表示设备类型和操作系统类型。
const browserPlatform = require('browser-platform');
const result = browserPlatform.detect();
console.log(result); // { device: 'PC', os: 'Win32' }2、通过 ES 模块引入
如果你的项目使用的是 ES6 模块化方式，可以这样引入：
import { detect } from "browser-platform";
const result = detect();
console.log(result); // { device: 'PC', os: 'Win32' }API
detect():Object: 返回一个包含 device 和 os 两个属性的对象，分别表示设备类型和操作系统类型。
示例代码
我们来看看如何使用 browser-platform 来适配不同平台的布局。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------- ------------
-------
------
---- ---------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---- ----------------
----------- -- -- -------------
------- -- - ---- ---- --- ---------------------
------------- ------------
------
------
------- ------------------------
-------
-------我们根据不同的设备类型和操作系统类型来调整导航栏和内容区域的布局。
-- -------------------- ---- ------- ------ - ------ - ---- ------------------- ----- ------ - --------- ----- --- - ------------------------------- ----- --- - ------------------------------ ----- ------- - ----------------------------------- ----- ------ - --------------------------------- -- -------------- --- ---- -- --------- --- -------- - --------------- - ------ ---------------- - -- ------ --------------- - ------- --------------- - ------ ------------------- - ------- ------------------- - ------ - ---- -- -------------- --- --------- - ----------------- - ------- --------------------- - ------- - ---- - --------------------- - ------- - -------------------------------- -- -- - ------------- --------- ---
结语
browser-platform 是一个非常实用、易用的工具。在前端开发中，我们可能会面对多种浏览器平台，使用 browser-platform 可以帮助我们轻松地判断出当前页面所在的浏览器平台，并且根据不同设备类型和操作系统类型来适配不同的布局或加载不同版本的资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde518d