Search Unity

Question Webgl real-time adaptation of the game for the browser

Discussion in 'Web' started by AvinDev, Jan 24, 2023.

  1. AvinDev

    AvinDev

    Joined:
    Sep 10, 2021
    Posts:
    9
    Hello! Please tell me what needs to be written into the code so that when the browser size changes, the game remains within the same boundaries, without going beyond? I've been sitting here all day and I don't understand how to do it!

    Code (JavaScript):
    1. <!DOCTYPE html>
    2. <html lang="en-us">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6.     <title>Unity WebGL Player | Puzzle</title>
    7.     <link rel="shortcut icon" href="TemplateData/favicon.ico">
    8.     <link rel="stylesheet" href="TemplateData/style.css">
    9.     <script src="TemplateData/UnityProgress.js"></script>
    10.     <script src="Build/UnityLoader.js"></script>
    11.     <script>
    12.       var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Puzzle.json", {onProgress: UnityProgress});
    13.     </script>
    14.   </head>
    15.   <body>
    16.  
    17.   <style type="text/css">
    18.     body {
    19.         overflow: hidden;
    20.     }
    21. </style>
    22.  
    23.  
    24.     <div class="webgl-content" style="display: table; width: 100%; height: 100%;">
    25.       <div id="unityContainer"></div>
    26.     </div>
    27.     <script>
    28.     var mywidth = innerWidth;
    29.     var myheight = innerHeight;
    30.         document.getElementById("unityContainer").style.width = mywidth + "px";
    31.         document.getElementById("unityContainer").style.height = myheight + "px";
    32.     </script>
    33.   </body>
    34. </html>
    I tried to insert this, but it doesn't work, maybe I made a mistake, I don't know :(

    Code (JavaScript):
    1. * {
    2.   margin: 0;
    3.   padding: 0;
    4. }
    5.  
    6. canvas {
    7.   width: 100%;
    8.   height: 100%;
    9.   position: absolute;
    10. }