Get Browser Screen Width and Height dynamically using jquery

This is an quick and easy code to demonstrate how to get screen width and height of your browser window using jQuery. As you resize your browser window the values of the width and height of the frame is displayed.

This can be quite handy when your testing your responsive design of your website. You can view this page on various devices to get the height and width.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js" >
</script>
<style>
#display {
        width: auto;
        height:22px;
        background-color: #ccc;
        color: #222;
        margin-left: 5px;
        font-size:20px;
        text-align: center;
    }
</style>
</head>
<body>
<script>
$("#display").html("<b>Width</b> : " + 
       $(window).width() + ",<b>Height : </b>" +
       $(window).height());
$(window).resize(function() {
        $("#display\").html("<b>Width</b> : " +
        $(window).width() + ",<b>Height : </b>" +
        $(window).height());
});
    </script>
<div id="display"></div>
</body>
</html>

Get Browser width and height using jQuery

Note: There is an easier way to do this using Chrome browser Inspect option, Right Click on any web-page and click on Inspect, click on "Toggle Device toolbar" and select responsive option, drag the width and height to know how your page renders and what the page dimensions are.

More Posts related to jQuery,

More Posts: