Updated March 30, 2023
Introduction to jQuery get screen width
The jQuery get screen width is performed to get the total width of the user’s screen in pixels. It can be performed with the help of the width property of the screen. The jQuery width property is a built-in property in jQuery. The screen size is the total size of the user’s screen; the other dimensions which are usually calculated are window size which is the size of the browser window; and document size which is the size of the HTML document. The screen size can be accessed with the help of the height and width properties of the screen, whereas the window size and document size can be accessed with the help of height() and width() functions.
Syntax of jQuery get screen width:
var x = screen.width;Parameter:
- It does not accept any parameter.
Return Value
The return value of this property is the number representing the total width of the user’s screen in pixels.
Working of jQuery get screen width
- The jQuery get screen width can be performed with the help of the width property of the screen object.
- Suppose we need to know the total width of the user’s screen, then we can use the width property of the screen object as var wdt = screen.width,” which returns the width of the screen in pixels.
Examples of jQuery get screen width
Different examples are mentioned below:
Example #1
To get the width of the screen.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery get screen width </title>
</head>
<body>
<h3> This an example of jQuery get screen width : </h3>
<button onclick = "disp()"> Clock here to get the total width of your screen in the pixels. </button>
<p id = "p1" style = "color : red;" > </p>
<script>
function disp() {
var wd = screen.width;
$( "#p1" ).text( "The total Width width of the screen is : " + wd + " px ");
}
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there is a button on click of which it displays the total width of the user’s screen in pixel by using the code “var wd = screen.width;”, then the return value that is the total width of the screen is displayed, as we can see once we click on the button.
Example #2
To get the width of the screen and the available width of the screen.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery get screen width </title>
</head>
<body>
<h3> This an example of jQuery get screen width : </h3>
<button onclick = "disp()"> Clock here to get the total width and available width of your screen in the pixels. </button>
<p id = "p1" style = "color : green;" > </p>
<script>
function disp() {
var wd = screen.width;
var awd = screen.availWidth;
alert( "The total Width width of the screen is : " + wd + " px. \n The total available width of the screen is : " + awd + " px ");
}
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there is a button on click of which it displays the total width of the user’s screen and the total available screen in pixel as “var wd = screen.width;” and “var awd = screen.availWidth;” then, the return values are displaying, as we can see once we click on the button.
Example #3
To get the width and height of the screen, window, and document.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
<title> This is an example for jQuery get screen width </title>
</head>
<body>
<h3> This an example of jQuery get screen width : </h3>
<button onclick = "disp()"> Clock here to get the total width and height of screen, window and document in the pixels. </button>
<p id = "p1" style = "color : green;" > </p>
<script>
function disp() {
var wd = screen.width;
var ht = screen.height;
$( "#p1" ). append( "The total width width of the screen is : " + wd + " px. <br> The total height of the screen is : " + ht + " px ");
$( "#p1" ). append( "<br> The total width of the window is : " + $(window).width() + " px. <br> The total height of the window is : " + $(window).height() + " px ");
$( "#p1" ). append( "<br> The total width width of the document is : " + $(document).width() + " px. <br> The total height of the document is : " + $(document).height() + " px ");
}
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, there is a button on click of which it displays the total width and height of the user’s screen object, window object, and the document object in the pixel as “var wd = screen.width;”, so, the return values are displaying, as we can see once we click on the button.
Conclusion
It can be performed with the help of the screen object width property; the width property is a built-in property of the screen in jQuery, which is used to get the total width of the user’s screen.
Recommended Articles
This is a guide to jQuery get screen width. Here we discuss the introduction, working of jQuery get screen width and examples respectively. You may also have a look at the following articles to learn more –
