jQuery Viewport Size

Determine browser viewport size on page load and resize

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>jQuery Viewport Size</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="wrap">
  <p>Your window size is <span class="size"></span><sup>PX</sup></p>
  <p class="extra"></p>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  background: #333;
}

.wrap {
  width: 100%;
  margin: 100px auto 0;
  text-align: center;
}
.wrap p {
  font-size: 2em;
  display: block;
  font-family: helvetica, arial, sans-serif;
  color: #ccc;
  margin: .5em 0;
  line-height: 1;
}
.wrap p .size {
  color: #ff9e00;
}
.wrap p sup {
  font-size: 14px;
  margin-left: 5px;
}
/* Downloaded from https://www.codeseek.co/ */
$(window ).on("load resize", function() {
  
    var windowWidth = $(window).width();
    var htmlOut = '.extra';
  
    $(".size").html(windowWidth);
    console.log(windowWidth);
  
    if(windowWidth >= 1024){
      $(htmlOut).html('Desktop');
    } 
    else if (windowWidth >= 768){
      $(htmlOut).html('Tablet');
    } 
    else{
      $(htmlOut).html('Phone');
    }
  
});

This awesome code ( jQuery Viewport Size ) is write by Jeff Pannone, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Jeff Pannone