I used fit design but encountered a situation where there might be a black border. How can I get the background according to the viewport of the screen and the container content still follow the designed ratio? I have used the fit Height , Width option in project settings
adaptScreen() {
const rate = window.innerWidth / window.innerHeight
const width: number = window.innerWidth
const height: number = window.innerHeight
if (rate > 21 / 9) {
view.setDesignResolutionSize(window.innerWidth, window.innerHeight, ResolutionPolicy.SHOW_ALL)
Adapt.screenScale = height / this.initHeight
//this.node.setScale(Adapt.screenScale, Adapt.screenScale);
Adapt.adaptWidth=this.initWidth
Adapt.adaptHeight=this.initHeight
this.UICamera.orthoHeight=Adapt.adaptHeight/2
}
else if (rate < 16 / 9) {
view.setDesignResolutionSize(width, width*1.778, ResolutionPolicy.FIXED_WIDTH)
//view.setDesignResolutionSize(900, 1200, ResolutionPolicy.FIXED_WIDTH)
Adapt.screenScale = width / (this.initWidth*0.762)
//this.node.setScale(Adapt.screenScale, Adapt.screenScale);
Adapt.adaptWidth=1600
Adapt.adaptHeight= Adapt.adaptWidth*height/width
this.UICamera.orthoHeight=Adapt.adaptHeight/2
}
else {
view.setDesignResolutionSize(width, height, ResolutionPolicy.FIXED_HEIGHT)
//const rate = window.innerWidth / window.innerHeight
//this.node.getComponent(UITransform).height = this.node.getComponent(UITransform).width / rate
Adapt.screenScale = height / this.initHeight
//this.node.setScale(Adapt.screenScale, Adapt.screenScale);
Adapt.adaptWidth=width/Adapt.screenScale
Adapt.adaptHeight=this.initHeight
this.UICamera.orthoHeight=Adapt.adaptHeight/2
}
this.tick++
// if(this.tick>1) location.reload()
}
Try customizing this code according to your requirement and calling it on window-resize,
This should do the thing,
But the main issue you may encounter is with the text boxes used in cocos, as whenever i tried clicking it, the text always seemed to be outside the text boxes.
If you dont have text boxes in your project or game, then this could do the thing.
Merry cristmas.