Build doesnt fit the device

Cocos Creator
1

In my cocos 3.8.3, I have project settings as -
DesignWidth - 1920
DesignHeight - 1080
fitwidth - true
fitheight - true

when I run this through the editor/simulator, it opens it in a browser, when I click the “Inspect” on the right click, it gives me options to choose various devices. Here, when I choose a different device, the game window resizes based on the device selected and my index.html gets updated -

<div id="GameDiv" class="wrapper" style="display: flex; justify-content: center; align-items: center; transform: rotate(0deg); margin: 0px auto; width: 414px; height: 896px;">
                    <div id="Cocos3dGameContainer" style="width: 100%; height: 100%;">
                        <canvas id="GameCanvas" tabindex="-1" style="background-color: '';" width="828" height="1792"></canvas>
                    </div>
                    <div id="splash" style="visibility: visible; display: none;">
                        <div class="progress-bar stripes"><span style="width: 60%;"></span></div>
                    </div>
                    <div id="bulletin">
                        <div id="sceneIsEmpty" class="inner">There's nothing in scene to preview.Add something to the scene now!</div>
                    </div>
                    <div class="error" id="error">
                        <div class="title">Error <i>(Please open the console to see detailed errors)</i></div>
                        <div class="error-main"></div>
                        <div class="error-stack"></div>
                    </div>
                </div>

However, when I Build this and open the index.html in the build folder, or when I open the build folder through visual studio code and open it through “goLive”. Now, when I click on the inspect button, and choose a device, the windowsize doesnt fit the resolution of the device. The index.html is -

<div id="GameDiv" cc_exact_fit_screen="false" style="width: 1920px; height: 1080px; display: flex; justify-content: center; align-items: center;">
      <div id="Cocos3dGameContainer" style="width: 100%; height: 100%;">
        <canvas id="GameCanvas" width="3840" height="2160" tabindex="99"></canvas>
      </div>
    </div>

Why is my build behaving differently ? How do I fit my game on various devices ?

2

First, you need to understand the resolution policy.
Because we can’t expect all devices to have the same resolution as the design. So we need to choose an action when the mismatch happens.
Try to check the fitWidth, fitHeight, or both of them to see the different behaviors in each selection.

1 Like
3

Thanks for your response, but might need more help with this.

I tried to test this with the various options, just fitWidth, just fitHeight and both. My design resolution is 1920x1080.

I also attached a script to my Canvas which sets the resolution policy. I have set this to SHOW_ALL. I also tried other options such as FIXED_WIDTH, EXACT_FIT etc.

On some of the above configurations, in my sim mode ( when I run play through the editor ), I get the expected behaviour on various devices ( where the game fits the screen, I had both fitWidth and fitHeight selected and set the resolution policy as SHOW_ALL ). However when I build it and then open the index.html through a browser, the game doesnt fit the screen. I have tried it with the various combination of the above options ( fitwidth, fitheight and both ). In all cases, the game is zoomed in and displays the original resolution, and doesnt fit the screen size or mobile res ( I have to scroll to see the full extent of the game instead of fitting the dimensions ).

I have also tried these options - view.resizeWithBrowserSize(true) and in some without it. Am I missing something in the build mode vs editor mode ? or something else ?

( Note - this is on the browser ) Also, when I call screen.requestFullScreen();, it works and fits the game in the browser ( in the build mode as well ). However, I cant use this solution as the fullscreen is enabled based on an user input.

4

Ok, so I had my build platform set to web_desktop. When I changed that to web_mobile, it is working accurately. Totally missed that! All good now.

5

please always use web-mobile to publish your web games, even though your games are targeting to the desktops.
the web-desktop which I think is just suitable for preview something.