JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <title>Fit canvas to viewport for mobile devices</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  #container {
    margin: 0 auto;
    width: 800px;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;
    border-radius: 10px;
    margin-top: 2px;
  }
  canvas {
   display: block;
  }
  </style>
</head>
<body>
  <div id="container">
    <canvas id="workspace" width="600" height="600"></canvas>
  </div>
  <script>
  (function() {
    // We are resizing for mobile devices only. For other devices, the
    // dimensions will be stuck at 800 * 600. To change the default dimensions,
    // change the height and width of the canvas and the width of the 

    var win = window,
        doc = document,
        w = win.innerWidth,
        h = win.innerHeight,
        container = doc.getElementById('container'),
        canvas = doc.getElementById('workspace');
    
    if( win.navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/i) 

) {
      value = h > w ? w :h;
	  //alert(h + " " + w);
	  value = value - 10;
	  //value =200;
	  canvas.height = value;
      canvas.width  = value;
      container.style.height = value+"px";
      container.style.width = value+"px";
    }
  })();
  </script>
</body>
</html>