Any ways to preview project in "web-mobile" mode instead of "web-desktop" through PC web?

Cocos Creator
#1

As the title suggests, my requirement is to preview the project in a mode similar to the published web-mobile version, which resizes the canvas when the window is resized.

I attempted to customize the preview template using index.ejs. However, it is only designed to add things. After tracing through the engine code, it appears that screen-adpater.ts might be related to this issue. When previewing the project, the _windowType remains locked at “SubFrame”, preventing the resizing logic from functioning.

Is there a way to rewrite this logic or simply switch to the “web-mobile” mode?

Thanks in advance.

#2

kinda solved myself, post it here just in case someone needs it.

step 1. create preview-template, which create index.ejs for you.
step 2. add at the bottom of index.ejs inside body
step 3. write these codes below inside “anyname.js”


const toolbar = document.body.children[0];
const footer = document.getElementById('content').children[1];

const gameDiv = document.getElementById('GameDiv');

const check = setInterval(() => {

    if (window.cc) {
        toolbar.remove();
        footer.remove();
        
        gameDiv.remove();
        document.body.appendChild(gameDiv);
        
        gameDiv.classList.remove('wrapper');
        gameDiv.style.display = 'flex';
        gameDiv.style.transform = 'rotate(0deg)';
        gameDiv.style.margin = '0px auto';
        gameDiv.style.justifyContent = 'center';
        gameDiv.style.alignItems = 'center';
        gameDiv.style.top = '0';
        gameDiv.style.left = '0';
        gameDiv.style.alignItems = 'center';

        gameDiv.setAttribute('cc_exact_fit_screen', "true");
        gameDiv.setAttribute('center', "");

        document.getElementById('content').remove();

        document.body.style.display = 'flex';
        document.body.style.position = 'absolute';
        document.body.style.flexDirection = 'column';
        document.body.style.top = '0';
        document.body.style.left = '0';
        document.body.style.width = '100%';
        document.body.style.height = '100%';
        document.body.style.padding = '0';
        document.body.style.border = '0';
        document.body.style.margin = '0';

        clearInterval(check);
    }
}, 300);

window.addEventListener('resize', () => {
    gameDiv.style.width = `${window.innerWidth}px`;
    gameDiv.style.height = `${window.innerHeight}px`;
});

simple explain:

  1. removed toolbar on the top
  2. removed footer on the bottom
  3. add custom window resize for the reason that view.setResizeCallback won’t work on PC web
  4. set some css just like the team did on the web-mobile platform
  5. the interval check is to make sure engine is loaded and cc namespace is injected in window

hope this will help

1 Like