Dynamically Obtaining Browser Screen Width and Height with jQuery [Updated 2023]

Although it's 2023, many developers still rely on the jQuery library for its ease of use in JavaScript. If you need to obtain the screen width and height of your browser window using jQuery, look no further than the following code. As you resize your browser window, the width and height values of the frame are automatically displayed.

There could be various reasons one may want to get the width and height of a web browser,

In order to create a responsive website that adapts to the different screen sizes (mobile/laptops), you need to know the screen width and height so that you can adjust the layout accordingly.
Knowing the screen size of the user could help you customize the user experience for different devices. For example, you might want to display a mobile-friendly version of your site on small screens or show a larger version of images on larger screens.
This may also help to track the screen size of your visitors to help you analyze their behavior and preferences. For example, you might find that visitors using smaller screens tend to click on certain areas of your site more frequently than those using larger screens.
If you display ads on your website, it could be so that you need to know specific screen sizes for displaying ads, so by knowing the screen size, you can ensure that the appropriate ad is displayed to the user.

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

Code Example:

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

You can see the below gif demo that as we resize the browser window, we get the correct width and height size in pixels.

Get Browser width and height using jQuery

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

Frequently Asked Questions (FAQ):

How can I get the browser screen width using jQuery?

let screenWidth = $(window).width();

How do I obtain the browser screen height with jQuery?

let screenHeight = $(window).height();

Example of modifying content based on screen dimensions in jQuery?

if ($(window).width() < 768) {
    // Adjust content for smaller screens
} else {
    // Content for larger screens
}

How to detect screen size changes in real-time using jQuery?

$(window).resize(function() {
    // Your code to execute when the screen size changes
});

What are some jQuery plugins for responsive design?

Bootstrap or Foundation for responsive design.

How to check if the screen width is less than 768 pixels using jQuery?

if ($(window).width() < 768) {
    // your code when width less than 768px
}

How to adjust image sizes dynamically using jQuery?

let newImageWidth = $(window).width() * 0.8;
$('#myImage').css('width', newImageWidth + 'px');

jQuery code for showing/hiding elements based on screen size?

if ($(window).width() < 600) {
    $('.mobile-only').show();
    $('.desktop-only').hide();
} else {
    $('.mobile-only').hide();
    $('.desktop-only').show();
}

How to load different JavaScript files for different screen sizes?

if ($(window).width() < 768) {
    $.getScript('mobile.js');
} else {
    $.getScript('desktop.js');
}

What's the jQuery method to set a specific viewport meta tag?

$('meta[name="viewport"]').attr('content', 'width=device-width, initial-scale=1.0');

How to create a responsive navigation menu with jQuery?

Example: Toggle navigation on small screens

$('.menu-icon').click(function() {
    $('nav').slideToggle();
});

Dynamically change a background image based on screen width?

if ($(window).width() < 1400) {
    $('body').css('background-image', 'url(background_large.jpg)');
} else {
    $('body').css('background-image', 'url(background_large.jpg)');
}

Query event to detect when the screen size changes.

$(window).resize(function() {
    // your code
});

How to create responsive text that adjusts based on screen width?

if ($(window).width() < 600) {
    $('.responsive-text').css('font-size', '16px');
} else {
    $('.responsive-text').css('font-size', '20px');
}

Facing issues? Have Questions? Post them here! I am happy to answer!

Author Info:

Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.

Follow him on: X

You can also reach out to him via e-mail: rakesh@code2care.org

More Posts related to jQuery,

More Posts: