HoRain云--JavaScript屏幕适配全攻略-平芜编程栈

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

⛳️ 推荐

专栏介绍

1. window.screen核心属性详解

在JavaScript中，window.screen对象提供了一种直接的方式来获取用户屏幕的详细信息，这对于实现响应式布局、全屏应用或优化资源加载非常有帮助。

1.`window.screen`核心属性详解

window.screen对象包含多个只读属性，用于获取屏幕的物理和可用信息：

screen.width与screen.height：返回显示屏幕的完整宽度和高度（单位：像素），代表设备的物理分辨率。
screen.availWidth与screen.availHeight：返回屏幕的可用宽度和高度，即从物理尺寸中减去了操作系统界面元素（如Windows任务栏）占用的空间。
screen.colorDepth与screen.pixelDepth：通常返回相同的值，表示屏幕的颜色深度（以位为单位）。现代设备通常为24位或32位，代表着屏幕能够显示的颜色数量。

示例代码：获取基础屏幕信息

// 获取屏幕的完整尺寸和可用尺寸 let fullScreenSize = `您的屏幕分辨率是: ${screen.width} x ${screen.height}`; let availableScreenSize = `可用工作区大小是: ${screen.availWidth} x ${screen.availHeight}`; let colorInfo = `屏幕颜色深度为: ${screen.colorDepth} 位`; console.log(fullScreenSize); console.log(availableScreenSize); console.log(colorInfo);

2. 区分屏幕、窗口与视口尺寸

理解不同尺寸概念的差异对于精准布局至关重要：

屏幕尺寸 (Screen Size)：通过screen.width/height获取，是显示器的物理属性，固定不变。
窗口尺寸 (Window Size)：通过window.innerWidth/innerHeight获取，指的是浏览器窗口内容区域的大小，包括垂直滚动条（如果有）。
视口尺寸 (Viewport Size)：通过document.documentElement.clientWidth/clientHeight获取，指的是HTML文档可视区域的大小，不包括滚动条和浏览器工具栏。

示例代码：对比不同尺寸

function displayAllSizes() { console.log(`屏幕分辨率: ${screen.width} x ${screen.height}`); console.log(`浏览器窗口内部大小: ${window.innerWidth} x ${window.innerHeight}`); console.log(`文档视口大小: ${document.documentElement.clientWidth} x ${document.documentElement.clientHeight}`); } // 页面加载时显示 displayAllSizes(); // 窗口大小改变时，重新显示 window.addEventListener('resize', displayAllSizes);

3. 动态监听与响应式适配

为了在用户调整窗口大小或设备方向改变时提供最佳体验，需要动态监听尺寸变化。

监听resize事件：可以为window对象添加resize事件监听器。但需要注意，此事件触发频繁，可能影响性能。
使用防抖 (Debounce) 优化：通过防抖技术，可以确保处理函数在事件停止触发一段时间后才执行，从而避免频繁的重复计算。

示例代码：优化的窗口大小监听

// 防抖函数 function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // 实际要执行的函数 const handleResize = debounce(() => { if (window.innerWidth < 768) { console.log("小屏幕布局生效"); // 执行针对小屏幕的DOM操作，例如切换CSS类 document.body.classList.add('mobile-layout'); } else { console.log("大屏幕布局生效"); document.body.classList.remove('mobile-layout'); } }, 250); // 在停止调整窗口250毫秒后执行 // 添加事件监听 window.addEventListener('resize', handleResize);