webgl需手动响应设备尺寸变化，核心是同步更新渲染器像素尺寸、css显示尺寸及摄像机宽高比与投影矩阵；须监听resize和orientationchange事件，结合devicepixelratio适配高清屏，并确保css布局与js像素设置协同。
WebGL 本身不自动响应设备尺寸变化，必须手动监听并更新渲染器、画布和摄像机参数，否则会出现拉伸、裁剪或视野错位。核心是同步更新三者：画布像素尺寸、CSS显示尺寸、摄像机宽高比与投影矩阵。
重设渲染器尺寸与画布像素
浏览器窗口或设备方向改变时，renderer.setSize() 必须被调用，它同时设置 canvas 的 width 和 height 属性（即 drawing buffer 像素数），直接影响 WebGL 渲染分辨率。仅改 CSS 宽高会导致像素拉伸或模糊。
- 使用
window.innerWidth和window.innerHeight获取当前视口尺寸 - 若需适配高清屏（如 Retina），应结合
window.devicePixelRatio计算实际像素：const dpr = window.devicePixelRatio || 1;renderer.setSize(width, height, false);canvas.width = width * dpr;canvas.height = height * dpr; - 调用
renderer.setPixelRatio(dpr)可简化该过程，但需确保 canvas 标签未被 CSS 强制缩放干扰
同步更新摄像机宽高比与投影矩阵
画布尺寸变了，摄像机看到的“画面比例”也得变，否则 3D 场景会横向压扁或纵向拉长。
Java Linux版
下载
Java Linux版下载入口，提供 Oracle JDK 26.0.2 官方 Linux 安装包、Java 环境配置、JDBC 数据库连接和 Java 服务端开发相关信息。
- 设置
camera.aspect = width / height - 立即调用
camera.updateProjectionMatrix()—— 这一步不可省略，否则投影矩阵仍按旧比例计算，导致透视失真 - 对正交相机（OrthographicCamera），还需重新计算
left/right/top/bottom参数，保持内容完整可见
处理 CSS 显示层与容器布局
Canvas 元素在页面中由 CSS 控制其显示大小和位置。若只靠 JS 更新像素尺寸，而 CSS 没约束，Canvas 可能溢出、被压缩或居中偏移。
- 推荐将 canvas 父容器设为相对定位，canvas 自身设为绝对定位 +
top:0;left:0;width:100%;height:100% - 避免直接给 canvas 设置固定宽高 CSS；应通过父容器控制显示尺寸，JS 负责像素尺寸
- 如需等比缩放（如 Unity WebGL 防拉伸），需用 JS 动态计算容器尺寸，使其始终满足目标宽高比（如 16:9），再居中显示并填充背景色
监听 resize 与 orientationchange 事件
不仅要监听 resize，移动端还必须监听 orientationchange（横竖屏切换），因为部分安卓设备切换时不触发 resize。
- 用
window.addEventListener('resize', handleResize)绑定回调 - 添加防抖（debounce）可减少高频触发开销，尤其在拖拽窗口时
- 首次加载后也应主动执行一次
handleResize()，确保初始尺寸正确
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
