什么是 window-info
window-info 是一个可以获取浏览器窗口信息的 JavaScript 库。他可以获取到窗口的尺寸、可视区域大小、屏幕分辨率等信息,能够方便地进行浏览器窗口大小自适应等操作。
安装
在安装之前,确保已经全局安装了 npm,如果没有请访问 npm 官网进行安装。
- 安装 window-info
npm install window-info
- 引入 window-info
import WindowInfo from 'window-info';
使用
下面是一个简单的示例,演示了如何使用 window-info 获取窗口信息。
-- -------------------- ---- ------- ------ ---------- ---- -------------- ----- ---------- - --- ------------- -------------------------------- -- ------ --------------------------------- -- ------ ------------------------------------- -- ---------- -------------------------------------- -- ---------- -------------------------------------- -- ------ --------------------------------------- -- ------
API
width()
获取窗口宽度值。
windowInfo.width(); // => 1024
height()
获取窗口高度值。
windowInfo.height(); // => 768
innerWidth()
获取窗口可视区域宽度值。
windowInfo.innerWidth(); // => 1008
innerHeight()
获取窗口可视区域高度值。
windowInfo.innerHeight(); // => 652
screenWidth()
获取屏幕宽度值。
windowInfo.screenWidth(); // => 1280
screenHeight()
获取屏幕高度值。
windowInfo.screenHeight(); // => 1024
总结
window-info 是一个非常方便的浏览器窗口信息库,能够方便地获取浏览器窗口尺寸、可视区域大小、屏幕分辨率等信息。在进行浏览器窗口大小自适应等操作时,window-info 能够提供非常好的帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60065f80238a385564ab6b19