twgl_test.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, user-scalable=yes">
    <title>twgl test</title>
    <style>
      div.stretchy-wrapper {
        width: 100%;
        padding-bottom: 100%; /* 16:9 */
        /* Other aspect ratios to try:
        * 56.25% = 16:9
        * 75% = 4:3
        * 66.66% = 3:2
        * 62.5% = 8:5
        */
        position: relative;
      /*   background: blue; */
      }

      div.stretchy-wrapper > div {
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;

        color: white;
        font-size: 24px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <p id="log">twgl-test</p>
    <div class="stretchy-wrapper"><div>
      <twglTest></twglTest>
    </div></div>
  </body>

  <script src="bin/twglTest.js"></script>
</html>