Custom Web Build Setup

I like how in development cocos creator handle different devices and screen sizes in browser mode. But when you build, it creates kinda 2 different version (one for mobile one for desktop). I wish if I could have the development version instead. does anyone have their own way of achieving that? Please, share if you got anything. Thank You.

No one replied :disappointed:
So, here’s my solution -

First Build for Desktop

  1. add Vue in index.html => <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  2. create style.js file => style.js
  3. add style.js at the end of index.hml => <script src="custom/style.js"></script>
  4. change index.html => <div id="app"> <div id="GameDiv" style="width:400px; height: 600px;"> <canvas id="GameCanvas" :width="gameWidth" :height="gameHeight"></canvas> <div id="splash"> <div class="progress-bar stripes"> <span style="width: 0%"></span> </div> </div> </div> </div>
  5. add custom style.css for better view => style.css
  6. place your splash image at the same folder as css.

It’s better if you customized for your needs.