js怎么获得屏幕

JavaScript获取屏幕信息的方法包括：使用window.screen对象、调用window.innerWidth和window.innerHeight、利用window.outerWidth和window.outerHeight。 其中，window.screen对象能够提供关于屏幕分辨率、可用高度和宽度的信息，是最为全面的方式。下面我们将详细描述如何利用这些方法获取屏幕信息。

一、WINDOW.SCREEN 对象

window.screen对象是JavaScript中提供的一个可以获取屏幕相关信息的接口。它可以帮助我们获取屏幕的宽度、高度、可用宽度和高度等信息。

1、`screen.width`和`screen.height`

这两个属性分别返回屏幕的总宽度和高度，以像素为单位。例如：

let screenWidth = screen.width;
let screenHeight = screen.height;
console.log(`屏幕宽度：${screenWidth}px`);
console.log(`屏幕高度：${screenHeight}px`);

2、`screen.availWidth`和`screen.availHeight`

这两个属性分别返回屏幕的可用宽度和高度（即减去系统任务栏等占用的空间）。例如：

let availWidth = screen.availWidth;
let availHeight = screen.availHeight;
console.log(`可用屏幕宽度：${availWidth}px`);
console.log(`可用屏幕高度：${availHeight}px`);

3、`screen.colorDepth`和`screen.pixelDepth`

这两个属性分别返回屏幕的颜色深度和像素深度：

let colorDepth = screen.colorDepth;
let pixelDepth = screen.pixelDepth;
console.log(`颜色深度：${colorDepth}`);
console.log(`像素深度：${pixelDepth}`);

二、WINDOW.INNERWIDTH 和 WINDOW.INNERHEIGHT

window.innerWidth和window.innerHeight属性分别返回浏览器窗口的内部宽度和高度，以像素为单位。它们不包括窗口的边框和工具栏等。

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
console.log(`窗口宽度：${windowWidth}px`);
console.log(`窗口高度：${windowHeight}px`);

三、WINDOW.OUTERWIDTH 和 WINDOW.OUTERHEIGHT

window.outerWidth和window.outerHeight属性分别返回整个浏览器窗口的宽度和高度，包括窗口的边框和工具栏。

let outerWidth = window.outerWidth;
let outerHeight = window.outerHeight;
console.log(`浏览器窗口总宽度：${outerWidth}px`);
console.log(`浏览器窗口总高度：${outerHeight}px`);

四、设备像素比

设备像素比（devicePixelRatio）是一个表示物理像素和设备独立像素（dips）之间关系的值。通过window.devicePixelRatio属性可以获取：

let dpr = window.devicePixelRatio;
console.log(`设备像素比：${dpr}`);

五、利用媒体查询获取屏幕信息

除了JavaScript提供的这些属性，我们还可以利用CSS的媒体查询来获取屏幕相关信息，并通过JavaScript读取这些信息。例如：

/* 定义媒体查询 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

然后在JavaScript中检测这些样式的应用情况：

if (window.matchMedia("(max-width: 600px)").matches) {
  console.log("屏幕宽度小于等于600px");
} else {
  console.log("屏幕宽度大于600px");
}

六、响应式设计中的屏幕信息获取

在现代Web开发中，响应式设计是一个重要的概念。开发者通过获取屏幕信息，动态调整页面布局和样式，从而提升用户体验。例如，利用屏幕宽度信息调整导航菜单的显示方式：

function adjustNavMenu() {
  if (window.innerWidth <= 768) {
    // 移动端显示方式
    document.getElementById('nav-menu').classList.add('mobile');
  } else {
    // 桌面端显示方式
    document.getElementById('nav-menu').classList.remove('mobile');
  }
}
// 监听窗口大小变化事件
window.addEventListener('resize', adjustNavMenu);
// 页面加载时执行一次
adjustNavMenu();

七、屏幕方向（Orientation）

屏幕方向（即设备是处于横屏还是竖屏状态）也可以通过JavaScript来获取。window.screen.orientation对象提供了这个信息：

let orientation = window.screen.orientation.type;
console.log(`屏幕方向：${orientation}`);
// 监听屏幕方向变化事件
window.screen.orientation.addEventListener('change', function() {
  console.log(`新的屏幕方向：${window.screen.orientation.type}`);
});

八、综合应用示例

结合以上各种方法，我们可以编写一个综合应用示例，动态获取并显示屏幕信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏幕信息获取示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        .info {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>屏幕信息获取示例</h1>
    <div class="info">
        <strong>屏幕宽度：</strong> <span id="screen-width"></span>
    </div>
    <div class="info">
        <strong>屏幕高度：</strong> <span id="screen-height"></span>
    </div>
    <div class="info">
        <strong>可用屏幕宽度：</strong> <span id="avail-width"></span>
    </div>
    <div class="info">
        <strong>可用屏幕高度：</strong> <span id="avail-height"></span>
    </div>
    <div class="info">
        <strong>窗口宽度：</strong> <span id="window-width"></span>
    </div>
    <div class="info">
        <strong>窗口高度：</strong> <span id="window-height"></span>
    </div>
    <div class="info">
        <strong>设备像素比：</strong> <span id="dpr"></span>
    </div>
    <div class="info">
        <strong>屏幕方向：</strong> <span id="orientation"></span>
    </div>
    <script>
        function updateScreenInfo() {
            document.getElementById('screen-width').innerText = screen.width + 'px';
            document.getElementById('screen-height').innerText = screen.height + 'px';
            document.getElementById('avail-width').innerText = screen.availWidth + 'px';
            document.getElementById('avail-height').innerText = screen.availHeight + 'px';
            document.getElementById('window-width').innerText = window.innerWidth + 'px';
            document.getElementById('window-height').innerText = window.innerHeight + 'px';
            document.getElementById('dpr').innerText = window.devicePixelRatio;
            document.getElementById('orientation').innerText = window.screen.orientation.type;
        }
        // 初次加载时更新信息
        updateScreenInfo();
        // 监听窗口大小变化事件
        window.addEventListener('resize', updateScreenInfo);
        // 监听屏幕方向变化事件
        window.screen.orientation.addEventListener('change', updateScreenInfo);
    </script>
</body>
</html>

这个示例展示了如何获取并显示屏幕的各种信息，并且在窗口大小或屏幕方向变化时实时更新这些信息。

通过以上内容，我们详细介绍了JavaScript中获取屏幕信息的各种方法。无论是开发响应式网页、处理不同设备的显示需求，还是优化用户体验，这些方法都非常重要。