反应原生尺寸窗口与屏幕 - Javascript

在Web开发中，可能会碰到需要获取浏览器窗口及屏幕的尺寸的情况。Javascript提供了相应的API来获取这些尺寸信息。

获取浏览器窗口尺寸

可以使用window.innerWidth和window.innerHeight来分别获取浏览器窗口的宽度和高度，单位是像素（px）。注意，这些值包括浏览器窗口的滚动条。

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

获取屏幕尺寸

可以使用screen.width和screen.height来分别获取屏幕的宽度和高度，单位是像素（px）。

const screenWidth = screen.width;
const screenHeight = screen.height;

获取设备像素比

对于高分辨率设备（如Retina屏幕），设备像素比（Device Pixel Ratio）指的是物理像素与逻辑像素的比例。可以使用window.devicePixelRatio获取设备像素比。

const devicePixelRatio = window.devicePixelRatio;

监听窗口尺寸变化事件

可以使用window.onresize来注册窗口尺寸变化事件的回调函数。该回调函数可以在浏览器窗口尺寸变化时被调用。注意，该事件在窗口大小变化时会被频繁地触发，需要考虑性能优化。

window.onresize = function() {
  // 窗口尺寸变化时的回调逻辑
};

以上就是在Javascript中获取浏览器窗口及屏幕尺寸的方式和注意事项。可以根据具体需求灵活运用这些API。