js怎么得到电脑的屏幕大小

JS获取电脑屏幕大小的几种方法、使用window.screen对象、结合CSS媒体查询

要在JavaScript中获取电脑的屏幕大小，可以使用多种方法，包括window.screen对象、结合CSS媒体查询、window.innerWidth和window.innerHeight。下面将详细介绍这几种方法，并具体说明如何实现和应用。

一、使用window.screen对象

1.1 获取屏幕宽度和高度

window.screen对象提供了几个属性，可以用来获取屏幕的相关信息。最常用的属性有screen.width和screen.height。

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

1.2 获取可用宽度和高度

除了总宽度和高度，window.screen还提供了screen.availWidth和screen.availHeight，用来获取屏幕的可用宽度和高度（排除了系统任务栏或其他界面元素占用的空间）。

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

二、结合CSS媒体查询

CSS媒体查询可以用来检测屏幕的特定属性，然后在JavaScript中通过window.matchMedia方法进行查询。

2.1 使用matchMedia进行媒体查询

window.matchMedia方法可以用于检测媒体查询的匹配情况。例如，可以检测屏幕的最大宽度是否小于某个值：

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

三、使用window.innerWidth和window.innerHeight

window.innerWidth和window.innerHeight属性用来获取浏览器窗口的内部宽度和高度，这些值包括滚动条的宽度。

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

四、综合应用

在实际项目中，获取屏幕大小信息是一个常见需求，例如在响应式设计中需要根据屏幕大小调整布局，或者在全屏游戏中需要获取屏幕大小以确定绘制区域。

4.1 结合多种方法实现响应式设计

在实际应用中，可以结合多种方法来实现更灵活的响应式设计。例如，结合window.screen和matchMedia来检测屏幕大小并调整布局：

function adjustLayout() {
    let screenWidth = window.screen.width;
    let screenHeight = window.screen.height;
    if (window.matchMedia("(max-width: 768px)").matches) {
        console.log("小屏设备，调整布局");
        // 调整布局代码
    } else {
        console.log("大屏设备，调整布局");
        // 调整布局代码
    }
}
window.addEventListener('resize', adjustLayout);
adjustLayout();

五、获取屏幕大小的注意事项

5.1 不同设备的差异

不同设备的屏幕大小和分辨率会有很大差异，例如手机、平板、笔记本和台式机。需要在代码中考虑这些差异，进行适配。

5.2 视口和设备像素比

有些设备（如Retina显示屏）具有更高的设备像素比（devicePixelRatio），这意味着一个CSS像素可能对应多个物理像素。在获取屏幕大小时，需要考虑设备像素比的影响。

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

通过以上几种方法，可以在JavaScript中灵活地获取屏幕大小，并根据需要进行相应的处理。特别是在响应式设计和全屏应用中，这些技巧会非常有用。