JavaScript基础教程（七十九）浏览器BOM之Window Screen：解密Screen API，你的浏览器屏幕宝藏，前端必看！

什么是Window Screen对象？

Window Screen是Browser Object Model (BOM)的重要组成部分，它提供了用户显示屏幕的详细信息。通过这个对象，开发者可以获取屏幕尺寸、颜色深度、像素密度等关键信息，从而创建更加智能自适应的网页应用。

核心属性详解

// 获取屏幕基本信息
console.log("屏幕宽度:", screen.width);    // 屏幕总宽度
console.log("屏幕高度:", screen.height);   // 屏幕总高度
console.log("可用宽度:", screen.availWidth);  // 扣除任务栏等后的宽度
console.log("可用高度:", screen.availHeight); // 扣除任务栏等后的高度
console.log("色彩深度:", screen.colorDepth);  // 颜色位数
console.log("像素深度:", screen.pixelDepth);  // 每像素位数

实战应用示例

1. 响应式布局增强

// 根据屏幕尺寸动态调整布局
function adaptLayout() {
    if (screen.width < 768) {
        document.body.classList.add('mobile-layout');
    } else if (screen.width < 1200) {
        document.body.classList.add('tablet-layout');
    } else {
        document.body.classList.add('desktop-layout');
    }
}

2. 高密度屏幕检测

// 检测Retina等高DPI屏幕
function isHighDensityScreen() {
    return (window.devicePixelRatio || 1) > 1.5;
}

if (isHighDensityScreen()) {
    // 加载高分辨率图片
    loadHighResAssets();
}

3. 全屏应用优化

// 利用可用屏幕空间优化全屏体验
function optimizeFullscreenApp() {
    const appContainer = document.getElementById('app');
    appContainer.style.width = screen.availWidth + 'px';
    appContainer.style.height = screen.availHeight + 'px';
    
    console.log(`优化全屏应用尺寸: ${screen.availWidth}x${screen.availHeight}`);
}