js怎么获取手机屏幕的宽度和高度

在JavaScript中获取手机屏幕的宽度和高度，可以使用window.screen对象、window.innerWidth和window.innerHeight属性。其中，window.screen对象包含了屏幕的详细信息，而window.innerWidth和window.innerHeight属性可以直接获取浏览器窗口的宽度和高度。这对于响应式设计和适配不同设备非常重要。接下来，我们将详细讨论如何使用这些方法，以及在实际应用中需要注意的细节。

一、使用`window.screen`对象获取屏幕宽度和高度

window.screen对象提供了设备屏幕的详细信息，包括屏幕的宽度和高度、可用宽度和高度、像素深度等。具体属性如下：

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

screen.width和screen.height属性返回整个屏幕的宽度和高度，单位为像素。这些属性非常适合用于全屏应用或者在初次加载时判断设备类型。

let screenWidth = screen.width;
let screenHeight = screen.height;
console.log(`Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);

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

screen.availWidth和screen.availHeight属性返回可用屏幕的宽度和高度，通常排除了操作系统的任务栏等非浏览器区域。

let availWidth = screen.availWidth;
let availHeight = screen.availHeight;
console.log(`Available Width: ${availWidth}, Available Height: ${availHeight}`);

二、使用`window.innerWidth`和`window.innerHeight`获取浏览器窗口宽度和高度

window.innerWidth和window.innerHeight属性返回浏览器窗口的视口（viewport）宽度和高度。这些属性非常适合用于动态调整布局和响应式设计。

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
console.log(`Window Width: ${windowWidth}, Window Height: ${windowHeight}`);

1. 响应式设计中的应用

在实际应用中，window.innerWidth和window.innerHeight常用于监听窗口大小的变化，以实现响应式设计。例如，可以结合resize事件来动态调整布局：

window.addEventListener('resize', () => {
    let windowWidth = window.innerWidth;
    let windowHeight = window.innerHeight;
    console.log(`Resized Window Width: ${windowWidth}, Resized Window Height: ${windowHeight}`);
    // 根据新的窗口尺寸进行布局调整
});

三、综合使用`window.screen`和`window.innerWidth`、`window.innerHeight`

在某些情况下，可能需要综合使用window.screen和window.innerWidth、window.innerHeight来实现更复杂的功能。例如，一个全屏应用程序可能需要知道设备屏幕的详细信息以及当前窗口的大小：

let screenWidth = screen.width;
let screenHeight = screen.height;
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
console.log(`Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);
console.log(`Window Width: ${windowWidth}, Window Height: ${windowHeight}`);

1. 设备类型判断

通过比较屏幕宽度和窗口宽度，可以大致判断当前设备的类型。例如，窄屏设备通常是手机或小型平板，而宽屏设备则可能是台式机或大屏平板：

let deviceType;
if (screen.width <= 768) {
    deviceType = 'mobile';
} else if (screen.width <= 1024) {
    deviceType = 'tablet';
} else {
    deviceType = 'desktop';
}
console.log(`Device Type: ${deviceType}`);

四、注意事项和最佳实践

1. 处理不同的DPI和缩放比例

在高DPI设备上，屏幕的物理像素和CSS像素可能不一致。为了解决这个问题，可以使用window.devicePixelRatio来获取设备的像素比率：

let devicePixelRatio = window.devicePixelRatio;
console.log(`Device Pixel Ratio: ${devicePixelRatio}`);

2. 兼容性问题

虽然大多数现代浏览器都支持上述属性，但在实际开发中仍需注意兼容性问题。可以使用feature detection来确保代码在不同浏览器中正常运行。

if (typeof window.innerWidth === 'number') {
    let windowWidth = window.innerWidth;
    console.log(`Window Width: ${windowWidth}`);
}

五、实际应用示例

1. 响应式导航栏

假设我们需要创建一个响应式导航栏，当窗口宽度小于600像素时，导航栏变为折叠状态：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar</title>
    <style>
        .navbar {
            display: flex;
            justify-content: space-between;
            background-color: #333;
            padding: 1rem;
        }
        .navbar a {
            color: white;
            text-decoration: none;
            padding: 0.5rem;
        }
        .navbar-toggle {
            display: none;
        }
        @media (max-width: 600px) {
            .navbar {
                flex-direction: column;
            }
            .navbar-toggle {
                display: block;
                cursor: pointer;
            }
            .navbar-menu {
                display: none;
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="navbar">
        <div class="navbar-toggle">☰</div>
        <div class="navbar-menu">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </div>
    </div>
    <script>
        document.querySelector('.navbar-toggle').addEventListener('click', () => {
            const menu = document.querySelector('.navbar-menu');
            if (menu.style.display === 'none' || menu.style.display === '') {
                menu.style.display = 'flex';
            } else {
                menu.style.display = 'none';
            }
        });
        window.addEventListener('resize', () => {
            if (window.innerWidth > 600) {
                document.querySelector('.navbar-menu').style.display = 'flex';
            } else {
                document.querySelector('.navbar-menu').style.display = 'none';
            }
        });
        // Initial check
        if (window.innerWidth > 600) {
            document.querySelector('.navbar-menu').style.display = 'flex';
        } else {
            document.querySelector('.navbar-menu').style.display = 'none';
        }
    </script>
</body>
</html>

2. 动态调整画布大小

假设我们有一个画布应用，需要根据窗口大小动态调整画布的尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Canvas</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            draw();
        }
        function draw() {
            ctx.fillStyle = 'blue';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
    </script>
</body>
</html>

通过这些示例，可以看到获取屏幕和窗口大小在实际应用中的重要性。无论是响应式设计、全屏应用还是动态调整布局，合理使用window.screen和window.innerWidth、window.innerHeight属性都是不可或缺的。希望本文能为您提供有价值的参考和帮助。