BOM 中的 screen 对象：获取屏幕信息

screen.availWidth 和 screen.availHeight

screen.availWidth 和 screen.availHeight 属性返回屏幕的可用宽度和高度，不包括任何浏览器工具栏或菜单。这对于创建全屏网页非常有用，因为它允许您使用屏幕上的所有可用空间。

示例

// 获取屏幕的可用宽度和高度
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;

// 创建一个全屏网页
document.body.style.width = screenWidth + "px";
document.body.style.height = screenHeight + "px";

screen.width 和 screen.height

screen.width 和 screen.height 属性返回屏幕的总宽度和高度，包括任何浏览器工具栏或菜单。这对于创建适合不同屏幕尺寸的网页非常有用，因为它允许您检测屏幕的大小并在必要时调整网页的布局。

示例

// 获取屏幕的总宽度和高度
var screenWidth = screen.width;
var screenHeight = screen.height;

// 根据屏幕的大小调整网页的布局
if (screenWidth < 1024) {
  // 在小屏幕上使用单列布局
  document.body.classList.add("single-column");
} else {
  // 在大屏幕上使用两列布局
  document.body.classList.add("two-column");
}

screen.colorDepth

screen.colorDepth 属性返回屏幕的颜色深度，以位为单位。这对于创建使用不同颜色深度的图像和视频非常有用，因为它允许您确保图像和视频在所有屏幕上正确显示。

示例

// 获取屏幕的颜色深度
var colorDepth = screen.colorDepth;

// 根据屏幕的颜色深度创建图像和视频
if (colorDepth <= 8) {
  // 在 8 位屏幕上使用 256 色调色板
  var palette = ["#000", "#fff", "#f00", "#0f0", "#00f", "#ff0"];
} else {
  // 在 24 位屏幕上使用 16777216 色调色板
  var palette = ["#000000", "#ffffff", "#ff0000", "#00ff00", "#0000ff", "#ffff00"];
}

总结

screen 对象提供有关屏幕的信息，包括尺寸、分辨率和颜色深度。这些信息对于网页设计和开发非常有用，因为它允许您创建对不同屏幕尺寸和分辨率进行优化的网页。