1

src/components/match3d-runtime/Match3DPhysicsBoard.tsx

@@ -1219,6 +1219,17 @@ function disposeTrayPreview(runtime: TrayPreviewRuntime | null) {
   runtime.renderer.domElement.remove();
 }
 
+export function applyMatch3DRendererCanvasLayout(
+  canvas: HTMLCanvasElement,
+) {
+  // 中文注释：WebGL 绘图缓冲区会乘设备 DPR，CSS 尺寸必须单独锁住，否则手机端画布会放大溢出。
+  canvas.style.display = 'block';
+  canvas.style.height = '100%';
+  canvas.style.inset = '0';
+  canvas.style.position = 'absolute';
+  canvas.style.width = '100%';
+}
+
 function positionTrayPreviewObject(
   runtime: TrayPreviewRuntime,
   object: ThreeObject3D,
@@ -1280,11 +1291,7 @@ export function Match3DTrayPreviewBoard({
         });
         renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.8));
         renderer.outputColorSpace = three.SRGBColorSpace;
-        renderer.domElement.style.display = 'block';
-        renderer.domElement.style.height = '100%';
-        renderer.domElement.style.inset = '0';
-        renderer.domElement.style.position = 'absolute';
-        renderer.domElement.style.width = '100%';
+        applyMatch3DRendererCanvasLayout(renderer.domElement);
         container.appendChild(renderer.domElement);
         const handleContextLost = (event: Event) => {
           event.preventDefault();
@@ -1529,6 +1536,7 @@ export function Match3DPhysicsBoard({
         renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.8));
         renderer.shadowMap.enabled = true;
         renderer.outputColorSpace = three.SRGBColorSpace;
+        applyMatch3DRendererCanvasLayout(renderer.domElement);
         container.appendChild(renderer.domElement);
         const handleContextLost = (event: Event) => {
           event.preventDefault();

src/components/match3d-runtime/Match3DRuntimeShell.test.tsx

@@ -20,6 +20,7 @@ import {
   MATCH3D_EXTRUDED_READABLE_SHAPES,
   MATCH3D_TRAY_MODEL_MIN_RELATIVE_SIZE,
   MATCH3D_TRAY_MODEL_TARGET_SIZE,
+  applyMatch3DRendererCanvasLayout,
   buildMatch3DPhysicsEntrySignature,
   createMatch3DCannonShape,
   createMatch3DThreeGeometry,
@@ -190,6 +191,18 @@ test('3D 模式下备选栏使用共享模型预览层，避免挤占中心棋
   expect(screen.getByTestId('match3d-tray-model-board')).toBeTruthy();
 });
 
+test('3D WebGL 画布锁定 CSS 尺寸，避免高 DPR 手机上溢出中心棋盘', () => {
+  const canvas = document.createElement('canvas');
+
+  applyMatch3DRendererCanvasLayout(canvas);
+
+  expect(canvas.style.position).toBe('absolute');
+  expect(canvas.style.inset).toBe('0');
+  expect(canvas.style.width).toBe('100%');
+  expect(canvas.style.height).toBe('100%');
+  expect(canvas.style.display).toBe('block');
+});
+
 test('3D 物理条目签名随 run 和视觉资源变化，避免旧模型复用到新局', () => {
   const run = startLocalMatch3DRun(10);
   const item = run.items[0]!;