JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>Orientation Checker</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximumscale=1.0; user-scalable=0;" />
    <link rel="stylesheet" media="screen" href="../css/base.css" />
    <script src="../js/lib/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/orientation-monitor.js"></script>    
  </head>
  <body>
    <h1 class="fancy">Orientation Monitor</h1>
    <ul class="details">
      <li class="header">Event Details</li>
      <li><label>Type:</label><span id="event-type">[not rotated yet]</span></li>
      <li class="header">Window Details</li>
      <li><label>Width:</label><span id="window-width">[not rotated yet]</span></li>
      <li><label>Height:</label><span id="window-height">[not rotated yet]</span></li>
      <li><label>Orientation:</label><span id="window-orientation">[not rotated yet]</span></li>
      <li class="header">Detection Results</li>
      <li><label>Orientation:</label><span id="orientation" >[not rotated yet]</span></li>
      <li><label>Rotation Class:</label><span id="rotation-class">[not rotated yet]</span></li>
    </ul>
  </body>
</html>
<script>
window.scrollTo(0,1);

</script>

CSS

h1.simple {
  font-size: 0.9em;
  padding: 4px;
  background: #333333;
  color: #AAAAAA;
  border-bottom: 2px solid #AAAAAA;
  margin: 0 0 4px 0;
}

h1.fancy {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #666666), color-stop(0.5, #3A3A3A), color-stop(0.5, #222222), color-stop(1.0, #000000));
  -webkit-box-shadow: 0 2px 1px #AAAAAA;
  -webkit-border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  font-size: 1.1em;
  color: white;
  padding: 10px 8px;
  margin: 0 6px 6px 6px;
  text-align: center;
}

ul {
    margin: 0;
    padding: 4px;
    list-style-type: none;
}

ul li {
    margin: 0;
    padding: 6px;
}

ul li.header {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #666666), color-stop(1.0, #000000));
    color: white;
    font-style: bold;
    padding: 6px;
    -webkit-border-radius: 3px;
    margin-top: 4px;
}

ul li label {
    width: 120px;
    float: left;
    clear: left;
}

JavaScript

$(document).ready(function() {

  var canDetect = "onorientationchange" in window;
  var orientationTimer = 0;
  var ROTATION_CLASSES = {
    "0": "none",
    "90": "right",
    "-90": "left",
    "180": "flipped"
  };
  
  $(window).bind(canDetect ? "orientationchange" : "resize", function(evt) {
    clearTimeout(orientationTimer);
    orientationTimer = setTimeout(function() {
      
      // display events in window
      $("#event-type").html(evt.type);
      $("#window-orientation").html(window.orientation);
      $("#window-width").html(window.innerWidth);
      $("#window-height").html(window.innerHeight);
      
      // given we can only really rely on width and height at this stage,
      // calculate the orientation based on aspect ratio
      var aspectRatio = 1;
      if (window.innerHeight !== 0) {
        aspectRatio = window.innerWidth / window.innerHeight;
      } 
      
      // compute orientation based on aspect ratio
      var orientation = aspectRatio <= 1 ? "portrait" : "landscape";
      
      // if the event type is an orientation change event, we can rely on
      // the orientation angle
      var rotationText = null;
      
      if (evt.type == "orientationchange") {
        rotationText = ROTATION_CLASSES[window.orientation.toString()];
      } 
      
      $(window).trigger("reorient", [orientation, rotationText]);
      window.scrollTo(0,1);
    }, 500);
  });
  
  $(window).bind("reorient", function(evt, orientation, rotation) {
        // display the details we have determine from the display
        $("#orientation").html(orientation);
        $("#rotation-class").html(rotation);
    });
});