17370845950

JavaScript 不直接适配屏幕，而是协同 HTML/CSS 实现响应式：需先设 viewport 元标签，再用 innerWidth/devicePixelRatio 检测尺寸，节流 resize 事件，通过 class 切换配合 CSS 媒体查询，动态处理 canvas/图片高清适配，优先 CSS、JS 补位。

JavaScript 本身不直接“适配屏幕”，但它是实现移动端响应式行为和动态屏幕适配的关键执行层。真正的适配依赖 HTML、CSS（尤其是媒体查询、视口设置、相对单位）与 JavaScript 协同完成。JS 的作用在于：检测环境、动态调整、补足 CSS 能力不足的场景（比如复杂布局计算、交互反馈、第三方库注入等）。

设置正确的视口（viewport）是前提

没有这个 meta 标签，JS 再灵活也无从发力：

它告诉浏览器以设备真实宽度渲染页面，并禁用双击缩放（可按需保留）。这是所有 JS 适配逻辑运行的基础。

用 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 时给容器加 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 补位。