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();