js 手机屏幕尺寸

在JavaScript中获取手机屏幕尺寸，主要涉及到window.screen对象，它提供了关于用户屏幕的信息。以下是一些基础概念和相关信息：

基础概念

window.screen.width/height: 这两个属性返回屏幕的宽度和高度，单位是像素。这通常指的是浏览器窗口可以使用的最大宽度和高度，而不是整个手机屏幕的尺寸。
window.innerWidth/innerHeight: 这两个属性返回浏览器窗口内部的宽度和高度，包括滚动条（如果存在的话）。
window.outerWidth/outerHeight: 这两个属性返回浏览器窗口外部的宽度和高度，包括浏览器边框、工具栏等。

应用场景

移动端适配: 在移动端开发中，根据屏幕尺寸调整布局是非常重要的。
广告位设计: 根据屏幕尺寸动态调整广告位的大小和位置。

示例代码

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

// 获取浏览器窗口内部的宽度和高度
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;

// 获取浏览器窗口外部的宽度和高度
var outerWidth = window.outerWidth;
var outerHeight = window.outerHeight;

console.log("Screen Width: " + screenWidth);
console.log("Screen Height: " + screenHeight);
console.log("Inner Width: " + innerWidth);
console.log("Inner Height: " + innerHeight);
console.log("Outer Width: " + outerWidth);
console.log("Outer Height: " + outerHeight);

常见问题及解决方法

屏幕尺寸不准确: 有时候window.screen.width/height返回的值可能不准确，特别是在有虚拟按键的手机上。可以使用window.visualViewport来获取更准确的视口尺寸。

var visualViewportWidth = window.visualViewport.width;
var visualViewportHeight = window.visualViewport.height;

console.log("Visual Viewport Width: " + visualViewportWidth);
console.log("Visual Viewport Height: " + visualViewportHeight);

屏幕旋转问题: 当手机屏幕旋转时，屏幕尺寸会发生变化。可以监听resize事件来处理这种情况。

window.addEventListener('resize', function() {
    var newScreenWidth = window.screen.width;
    var newScreenHeight = window.screen.height;
    console.log("Screen resized to: " + newScreenWidth + "x" + newScreenHeight);
});

通过这些方法和技巧，开发者可以更好地处理不同屏幕尺寸的设备，提供更好的用户体验。