js-获取各种设备或浏览器的宽高来实现前端布局

一，获取各种设备屏幕尺寸的常用方法

1. 获取浏览器窗口的宽度和高度：

const screenWidth = window.innerWidth || document.documentElement.clientWidth
 || document.body.clientWidth;
const screenHeight = window.innerHeight || document.documentElement.clientHeight
 || document.body.clientHeight;

2. 获取屏幕的宽度和高度：

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

3. 获取显示器的宽度和高度：

const screenWidth = window.screen.availWidth;
const screenHeight = window.screen.availHeight;

4. 获取设备的屏幕宽度和高度：

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

二，实际应用

1.通过监听窗口的大小改变事件执行，动态的调整布局；

function adjustLayout() {
  const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  
  // 根据屏幕尺寸来调整布局
  if (screenWidth < 600) {
    // 如果屏幕宽度小于600px，则应用针对小屏幕的布局样式
    document.body.classList.add('small-screen');
  } else {
    // 其他情况应用默认布局样式
    document.body.classList.remove('small-screen');
  }
  
  // 还可以根据屏幕尺寸调整其他元素的样式和位置
  
  // 控制台输出屏幕尺寸
  console.log('屏幕宽度:', screenWidth, '屏幕高度:', screenHeight);
}

// 初始加载时调整一次布局
adjustLayout();

// 窗口大小改变时重新调整布局
window.addEventListener('resize', adjustLayout);

定义了一个adjustLayout函数来根据屏幕尺寸调整布局。

使用window.innerWidth和window.innerHeight属性获取屏幕的宽度和高度。

在adjustLayout函数中，根据屏幕宽度是否小于600px来应用不同的布局样式。如果屏幕宽度小于600px，给document.body元素添加small-screen类，以应用针对小屏幕的布局样式；否则，移除small-screen类，以应用默认布局样式。

2.通过监听窗口的大小改变事件，实时获取屏幕的尺寸并根据需要进行相应的调整。通过监听窗口大小改变事件来动态调整布局的示例代码。

function adjustLayout() {
  // 获取屏幕的宽度和高度
  const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  
  // 根据屏幕尺寸进行布局调整
  if (screenWidth > 1200) {
    // 如果屏幕宽度大于1200px，执行相应的布局逻辑
    
  } else if (screenWidth > 768) {
    // 如果屏幕宽度大于768px，执行相应的布局逻辑
    
  } else {
    // 如果屏幕宽度小于等于768px，执行相应的布局逻辑
    
  }
}

// 初始加载时进行一次布局调整
adjustLayout();

// 监听窗口大小改变事件，然后重新调整布局
window.addEventListener('resize', adjustLayout);

 初始加载页面时进行一次布局调整，然后在窗口大小改变事件发生时重新调整布局。通过监听窗口大小改变