Code Snippet: How to Enable Both Fit Width and Fit Height and Still Use Widget Component

Cocos Creator
#1

Hi,
@StudioAMK has a detailed tutorial on this, you can check it out here:

Unfortunately, the code doesn’t work in Cocos Creator 3.6.1, so here is the updated code:

makeResponsive() {
    let deviceResolution = view.getViewportRect();
    let deviceRatio = deviceResolution.width / deviceResolution.height;

    let canvasResolution = view.getDesignResolutionSize();
    let canvasRatio = canvasResolution.width / canvasResolution.height;

    if (deviceRatio > canvasRatio) {
        view.setResolutionPolicy(ResolutionPolicy.FIXED_HEIGHT);
    } else {
        view.setResolutionPolicy(ResolutionPolicy.FIXED_WIDTH);
    }
}

*You need to read the original tutorial (linked above) if you don’t understand the purpose of this code snippet.

2 Likes