正文

掌握JS技巧：轻松获取屏幕尺寸与分辨率，助你打造完美适配效果

/0 浏览量
0423

在网页设计和开发过程中，了解并获取屏幕尺寸与分辨率是非常重要的。这可以帮助我们更好地进行布局设计和适配，确保网页在不同设备上都能展现出最佳效果。本文将为你介绍几种JavaScript技巧，让你轻松获取屏幕尺寸与分辨率。

获取屏幕尺寸

1. window.innerWidth 和 window.innerHeight

这是最常用的方法，可以直接获取到当前视口的宽度和高度。

const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;

2. document.documentElement.clientWidth 和 document.documentElement.clientHeight

这种方法获取的是文档的视口宽度和高度，即不包含滚动条的宽度。

const screenWidth = document.documentElement.clientWidth;
const screenHeight = document.documentElement.clientHeight;

3. document.body.clientWidth 和 document.body.clientHeight

这种方法获取的是文档的视口宽度和高度，包含滚动条的宽度。

const screenWidth = document.body.clientWidth;
const screenHeight = document.body.clientHeight;

获取屏幕分辨率

1. window.screen.width 和 window.screen.height

这是最常用的方法，可以直接获取到屏幕的宽度和高度。

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

2. window.screen.width 和 window.screen.height

这种方法可以获取到屏幕的分辨率，但返回值可能不是整数。

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

获取设备像素比

设备像素比可以帮助我们更好地处理高清屏幕。

const pixelRatio = window.devicePixelRatio;

实例：动态调整布局

以下是一个简单的例子，展示如何根据屏幕尺寸调整布局。

function adjustLayout() {
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;

  // 根据屏幕尺寸调整样式
  if (screenWidth < 768) {
    // 小屏幕设备
    document.body.style.backgroundColor = 'red';
  } else {
    // 大屏幕设备
    document.body.style.backgroundColor = 'blue';
  }
}

// 监听窗口尺寸变化
window.addEventListener('resize', adjustLayout);

// 初始化布局
adjustLayout();

通过以上技巧，你可以轻松获取屏幕尺寸与分辨率，并根据这些信息进行布局调整。这样，你的网页就能更好地适应不同设备，提供更好的用户体验。

-- 展开阅读全文 --