jQuery Viewport Size

In this example below you will see how to do a jQuery Viewport Size with some HTML / CSS and Javascript

Determine browser viewport size on page load and resize

Thumbnail
This awesome code was written by jeffpannone, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jeffpannone ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/jeffpannone/jquery-viewport-size-Aamyb */
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/jeffpannone/jquery-viewport-size-Aamyb */
$(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');
    }
  
});

Comments