背景多端适配用什么模式?
在屏幕分辨率宽高比小于设计分辨率宽高比(iPad 情况)时,我们希望在宽度一致的情况下在上下两侧展示更多的背景区域,这个时候就需要使用 Fit Width;在屏幕分辨率宽高比大于设计分辨率宽高比(iPhoneX 情况)时,我们希望在高度一致的情况下在左右两侧展示更多的背景区域,这个时候就需要使用 Fit Height。
在代码中我们可以通过获取当前视图大小来得到实际屏幕分辨率的宽高比,根据宽高比来决定是使用 Fit Height 模式还是 Fit Width 模式。
exportfunction setCanvasScaleMode(canvas: cc.Canvas) {
const standardRadio = 16 / 9; // 标准宽高比,差不多就是iPhone6的宽高比(横屏),一般设计稿以此为标准
const screenSize = cc.view.getFrameSize();
const currentRadio = screenSize.width / screenSize.height; // 宽高比
if (currentRadio <= standardRadio) {
// 偏方形的屏幕,代表是iPad之类的。
canvas.fitHeight = false;
canvas.fitWidth = true;
} else {
// 偏长的屏幕,代表是ipx。太长了,高度显得小,所以优先适配高度
canvas.fitWidth = false;
canvas.fitHeight = true;
}
}