JavaScript 不直接适配屏幕，而是协同 HTML/CSS 实现响应式：需先设 viewport 元标签，再用 innerWidth/devicePixelRatio 检测尺寸，节流 resize 事件，通过 class 切换配合 CSS 媒体查询，动态处理 canvas/图片高清适配，优先 CSS、JS 补位。
JavaScript 本身不直接“适配屏幕”，但它是实现移动端响应式行为和动态屏幕适配的关键执行层。真正的适配依赖 HTML、CSS（尤其是媒体查询、视口设置、相对单位）与 JavaScript 协同完成。JS 的作用在于：检测环境、动态调整、补足 CSS 能力不足的场景（比如复杂布局计算、交互反馈、第三方库注入等）。
设置正确的视口（viewport）是前提
没有这个 meta 标签，JS 再灵活也无从发力：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
它告诉浏览器以设备真实宽度渲染页面，并禁用双击缩放（可按需保留）。这是所有 JS 适配逻辑运行的基础。
立即学习“Java免费学习笔记（深入）”；
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
用 JavaScript 获取并响应屏幕尺寸变化
通过 window.innerWidth、window.innerHeight 和 window.devicePixelRatio 获取当前视图宽高与像素比。监听 resize 事件可动态响应旋转或分屏：
- 避免高频触发：用节流（throttle）封装 resize 回调，例如延迟 100ms 执行一次
- 区分横竖屏：用 window.orientation（部分旧 Android）或对比宽高比判断（
innerWidth > innerHeight≈ 横屏） - 注意：iOS Safari 在地址栏收起/展开时也会触发 resize，需结合 scroll 或 orientationchange 辅助判断
配合 CSS 实现动态样式切换
JS 不应直接写大量内联样式，而是通过切换 class 控制预设的 CSS 规则：
- 根据屏幕宽度添加类名：
document.body.classList.add('screen-xs') - 用 CSS 媒体查询定义不同断点下的样式，JS 只负责“开关”逻辑
- 示例：小屏隐藏侧边栏，JS 检测到
innerWidth 时给容器加 <code>mobile-menu-collapsed类，CSS 控制 display 或 transform
处理高清屏（Retina）图像与 Canvas
在 dpr > 1 的设备上，普通 canvas 或图片会模糊。JS 需主动适配：
- Canvas：将
canvas.width/canvas.height设为物理像素（cssWidth * window.devicePixelRatio），再用 CSS 缩放到视觉尺寸 - 图片：用
srcset+sizes属性更优；若需 JS 加载，可读取devicePixelRatio选择 @2x/@3x 图片路径 - 避免硬编码像素值：用
getBoundingClientRect()获取元素实际渲染尺寸，比 offsetWidth 更可靠（尤其在 zoom 或 scale 下）
不复杂但容易忽略的是：适配不是让所有设备显示完全一样，而是让内容可读、可触、可操作。JS 是工具，不是银弹；优先用 CSS 解决，JS 补位。
