JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<div id="window-size"></div>
<div id="query-name"></div>

JavaScript

function onresize() {
  // get the window dimensions
  var h = $(window).height(),
    w = $(window).width();

  // log the window dimensions
  $('#window-size').html('height= ' + h + ' width: ' + w);

  // log whether the viewport is desktop, tablet, or mobile width
  var desktopMinWidth = 720;
  var mobileMaxWidth = 480;
  var mediaQueryMsg = "viewport is tablet width";

  if (w >= desktopMinWidth) {
    mediaQueryMsg = "viewport is desktop width";
  } else if (w < mobileMaxWidth) {
    mediaQueryMsg = "viewport is mobile width";
  }

  $('#query-name').html(mediaQueryMsg);

}

// bind the onresize function to run each time the window resizes
$(window).on('resize', onresize);

onresize(); // run the first time manually;