index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>RPG-JS demo</title>
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1, width=device-width, height=device-height"
    />
    <link rel="stylesheet" href="/main/head/light.css" />
  </head>

  <body>
    <div id="rpg"></div>

    <style>
      body,
      html {
        height: 100%;
        overflow: hidden;
      }

      body {
        margin: 0;
        background-color: black;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #rpg {
        position: relative;
      }

      @media (min-width: 800px) {
        #rpg {
          width: 816px;
          height: 624px;
        }
      }

      @media (max-width: 800px) {
        #rpg {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    </style>
  </body>
</html>