fix: 修复 390x844 等窄高屏下 canvas 布局偏移问题

- Scene.setContentSize 修复 typo：height != this.contentWidth → this.contentHeight
- 内容 padding 乘以 devicePixelRatio，确保跨 DPI 设备视觉一致
- html 增加 overflow:hidden，防止外层滚动条影响布局
- #game-col 和 #game-area 增加 min-width:0 + width:100%，确保 flex 列中撑满宽度

templates/coloring/assets/css/tools.css

@@ -7,6 +7,7 @@ html,
 body {
   width: 100%;
   height: 100%;
+  overflow: hidden;
   background: linear-gradient(160deg, #fff9f2 0%, #ffeedd 100%);
   transition: none;
   -webkit-tap-highlight-color: transparent; /*消除移动端的灰色背景闪烁*/
@@ -54,6 +55,8 @@ body {
   order: 2; /* 竖屏：位于 logo(1) 与 cta(10) 之间 */
   flex: 1;
   min-height: 0; /* 防止 flex 子项无法收缩 */
+  min-width: 0;  /* 防止 flex 子项撑开容器 */
+  width: 100%;
   display: flex;
   flex-direction: column;
   position: relative; /* promo-screen absolute 定位的父容器 */
@@ -63,6 +66,8 @@ body {
 #game-area {
   flex: 1;
   min-height: 0;
+  min-width: 0;
+  width: 100%;
   position: relative;
 }
 

templates/coloring/src/base/Scene.ts

@@ -177,7 +177,7 @@ export class Scene implements Disposable {
   }
 
   setContentSize(width: number, height: number) {
-    if (width != this.contentWidth || height != this.contentWidth) {
+    if (width != this.contentWidth || height != this.contentHeight) {
       this.contentWidth = width;
       this.contentHeight = height;
       this.updateBestFit();

templates/coloring/src/filler/index.ts

@@ -187,8 +187,10 @@ async function init() {
 
   console.log("resource", resource);
 
-  // canvas 区域与所有 UI 完全分离，只保留极小视觉边距
-  scene.setContentPadding(new Padding(20, 20, 20, 20));
+  // canvas 区域与所有 UI 完全分离，只保留适当视觉边距
+  // 乘以 pixelRatio 转换为设备像素，确保跨 DPI 设备视觉一致
+  const pad = 20 * pixelRatio;
+  scene.setContentPadding(new Padding(pad, pad, pad, pad));
 
   //let page = await loadImage('/webgl/page.png')
   //let page = await loadImage('/assets/resources/friend/page_gray.png')