因为pc浏览器端不比手机端,手机分辨率除了ipad等特别的,一般只需要把背景图拉宽或者拉高一些,就能保证不留黑边,pc端浏览器可以随便拉,但是一般为了效果,浏览器界面再拉也不允许留黑边的,可以试试其他网站拉伸(基本都是没黑边),只是窗口到一定程度后,界面保持原比例,不再缩放
主canvas的适配代码,监听浏览器窗口变化,设置canvas的适配 设计比例1920*1080
onLoad() {
this.updateSizeFit();
let _this = this;
// 监听浏览器窗口大小变化
cc.view.setResizeCallback(function () {
_this.updateSizeFit();
// rect.left, rect.top, rect.width, rect.height (像素值)
});
}
// 根据浏览器窗口变化适配
updateSizeFit() {
var rect = cc.game.canvas.getBoundingClientRect();
let rateWidth = Math.round(rect.width / 1920 * 100) / 100;
let rateHeight = Math.round(rect.height / 1080 * 100) / 100;
console.log("屏幕发生变化", rateWidth, rateHeight)
// 这里0.2是高度和1080,宽度和1920的比例 差距较大,就是和原始设计比例相比,太高或太宽了,就不做适配了,窗口变化,界面始终不缩放,维持锚点在窗口内,锚点外的就被窗口边缘覆盖了
if (Math.abs(rateWidth - rateHeight) > 0.2 || rateWidth == rateHeight) {// 宽高差距太大或者宽高比=,不做适配
cc.Canvas.instance.fitHeight = false;
cc.Canvas.instance.fitWidth = false;
UIModalMgr.inst.updateMaskView();// 更新popUI mask大小
EventCenter.emit(EventCenterNameEnum.ScreenChange);
return;
}
if (rateWidth < rateHeight) {
cc.Canvas.instance.fitHeight = false;
cc.Canvas.instance.fitWidth = true;// 以宽来适配
}
else if (rateHeight < rateWidth) {
cc.Canvas.instance.fitHeight = true; // 以高来适配
cc.Canvas.instance.fitWidth = false;
}
}
其他全屏页面的适配
1,全屏页面预制体中预制体根结点添加widget,代码中选中左右上下,目标设置为canvas,此代码在界面初始化调用一次就行了
widget.right = 0;
widget.left = 0;
widget.top = 0;
widget.bottom = 0;
widget.isAlignLeft = true;
widget.isAlignRight = true;
widget.isAlignBottom = true;
widget.isAlignTop = true;
widget.target = cc.find("Canvas");
widget.updateAlignment();
2,预制体的背景图bg也同样添加widget,同1设置,target以预制体的根结点就可以,这样始终可以充满整个屏幕
3,全屏预制体上其他的按钮之类的,只要不是居中显示,一般都需要加widget,做相对位置,在窗口变化的时候,来保持元素位置偏移不那么大,widget的target是预制体根结点,或者本元素的父节点
比如我全屏界面<关闭按钮>在左上脚,widget以预制体根结点,这样可以保持关闭按钮一直在左上角,适配窗口比较好