HTML5小游戏适配需同步配置viewport、Canvas像素尺寸与CSS缩放：viewport须设initial-scale=1.0等禁缩放；canvas.width/height应基于父容器尺寸动态设置，style宽高设为100%；优先用resize+devicePixelRatio方案而非scale，横竖屏切换需防抖并重置transform。
HTML5小游戏无法填满屏幕、在不同设备上变形或出现黑边，根本原因不是代码写得不够“酷”，而是 viewport 设置、Canvas 尺寸控制和 CSS 缩放逻辑没对齐——三者缺一不可。
viewport meta 标签必须显式声明
很多开发者以为 就够了，其实它默认允许用户缩放，且不锁定初始缩放比例，导致 Canvas 渲染尺寸与 CSS 视口不一致。
- 必须加上
initial-scale=1.0, maximum-scale=1.0, user-scalable=no，否则 iOS Safari 可能强制触发双击缩放，Canvas 被拉伸 - 安卓部分 WebView（如微信内嵌）需要额外加
shrink-to-fit=no，否则会自动压缩内容适配视口 - 不要用
width=1024或固定值，一律用width=device-width
Canvas 的 width/height 属性 ≠ CSS 宽高
Canvas 是位图容器，canvas.width 和 canvas.height 决定绘图缓冲区的像素数量，而 style.width 和 style.height 控制它在页面中被拉伸显示的尺寸。二者不匹配，画面必然模糊或裁切。
- 初始化时：先读
canvas.parentElement.clientWidth和.clientHeight，再赋给canvas.width/canvas.height - 务必重置
canvas.style.width = '100%'和canvas.style.height = '100%'，否则 CSS 默认按 300×150 渲染 - 监听
window.resize时，不能只改 style，必须同步重设canvas.width/canvas.height并清空画布重绘
缩放策略选 scale 还是 resize？看游戏类型
“自适应”不等于“等比缩放”。UI 密集型（如答题类）适合 CSS transform: scale()；动作类（如平台跳跃）必须用 Canvas 像素级重绘，否则输入坐标和渲染位置错位。
立即学习“前端免费学习笔记（深入）”；
- 用
scale()：仅适用于无精确点击/碰撞检测的轻量游戏；需用getBoundingClientRect()手动换算鼠标坐标 - 用
resize：推荐方案。按设备像素比（window.devicePixelRatio）放大 canvas 缓冲区，再用 CSS 缩回物理尺寸，兼顾清晰度与坐标一致性 - 避免混合使用：比如 Canvas 设为 640×480，又用 CSS 放大 2 倍，再加 transform scale(0.5) —— 多层缩放会累积浮点误差，拖拽响应延迟明显
横竖屏切换时 Canvas 常见崩坏点
PC 端少遇，但移动端横竖屏切换后，window.innerWidth 可能滞后于实际布局，或触发两次 resize，导致 Canvas 被设成错误宽高比。
- 加防抖：用
setTimeout延迟 100ms 再执行 resize 逻辑，避开 Safari 的 layout 滞后 - 监听
orientationchange事件（iOS），而非只靠resize；Android 推荐监听resize+screen.orientation变化 - 切换后立即调用
canvas.getContext('2d').resetTransform()，防止旧 transform 矩阵残留影响绘制
最易被忽略的是 devicePixelRatio 动态变化——比如从桌面 Chrome 切到 iPad Pro，像素比从 1 跳到 2，但 Canvas 缓冲区没重设，结果一半区域糊成马赛克。这个细节没有统一 API 拦截，只能靠 resize 时重新取值判断。
