/*
* PC / 桌面浏览器适配 —— 竖屏铺满
*
* 设计分辨率是 720 x 1280(9:16), PC 是横屏, 所以"铺满"的正确做法是:
* 把画布容器锁死在 9:16, 高度撑满视口, 水平居中, 左右多出来的部分留给页面背景。
*
* 这样 1K(1920x1080) / 2K(2560x1440) / 4K 以及任意窗口尺寸都不用单独配置:
* 缩放比 = 视口高度 / 1280
* 画布尺寸 = 720 * 缩放比 x 视口高度
* 1920x1080 -> 0.844 -> 607 x 1080, 左右各留 ~656px
* 2560x1440 -> 1.125 -> 810 x 1440, 左右各留 ~875px
* 3840x2160 -> 1.688 -> 1215 x 2160, 左右各留 ~1312px
* 引擎侧可见的设计区域恒为 720x1280, 不裁切、不拉伸, UI 布局完全不用改。
*
* min(100vw, 100vh * 9/16) 取的是"宽约束 / 高约束"里更紧的那个:
* 窗口比 9:16 更宽 -> 高度说了算(PC 的情况); 窗口比 9:16 更窄 -> 宽度说了算,
* 此时画布上下留边而不是把内容裁掉。
*/
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
body {
/* 画布两侧的底色。想换成"背景图模糊延展"见下面那段注释 */
background-color: #2b3a2f;
cursor: default;
font-family: Helvetica, Verdana, Arial, sans-serif;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
/*
用游戏背景图做两侧延展(比纯色好看, 但要先把图拷过来):
1. 把 assets/resources/images/主页面/游戏背景.jpg 复制成
build-templates/web-desktop/bg.jpg
2. 把上面 body 里的 background-color 换成:
background: #2b3a2f url("./bg.jpg") center / cover no-repeat fixed;
3. 再加一条模糊遮罩, 免得背景图太抢眼:
body::before {
content: "";
position: fixed;
inset: 0;
backdrop-filter: blur(28px) brightness(0.55);
pointer-events: none;
}
(body::before 的 z-index 默认在 #GameDiv 之下, 因为 #GameDiv 是 flex item 且
创建了层叠上下文, 不需要额外调层级)
*/
body, canvas, div {
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0;
}
canvas {
background-color: rgba(0, 0, 0, 0);
}
#GameDiv {
/*
* !important 是故意的: 桌面模板在 index.html 上写了内联
* style="width:720px;height:1280px", 内联样式优先级高于样式表。
* 正常情况下 build-templates/web-desktop/index.ejs 已经把内联样式去掉了,
* 但万一模板覆盖没生效, 靠这里也能兜住, 效果一样。
*/
width: min(100vw, calc(100vh * 720 / 1280)) !important;
height: min(100vh, calc(100vw * 1280 / 720)) !important;
position: relative;
margin: 0;
border: none; /* 去掉桌面模板那圈 5px 黑边 */
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
#Cocos3dGameContainer, #GameCanvas {
width: 100%;
height: 100%;
display: block;
}
/* 桌面模板自带的