JQuery Viewport Size

Determine browser viewport size on page load and resize What is a jquery viewport size How do you make a jquery viewport size? This script and codes were developed by Jeff Pannone on 16 October 2021, Saturday.

How do I make an jquery viewport size?
  1. JQuery Viewport Size Previews
  2. JQuery Viewport Size HTML Codes
  3. JQuery Viewport Size CSS Codes
  4. JQuery Viewport Size JS Codes
JQuery Viewport Size Previews

JQuery Viewport Size HTML Codes

<!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>

JQuery Viewport Size CSS Codes

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;
}

JQuery Viewport Size JS Codes

$(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');
    }
  
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.