What is a screen object in Javascript ?
Screen object is used to provide information of the browser screen.
By which we can get all the display properties of the browser.
How to access the screen object ?
The screen object is the window property,
So it can be accessed with or without the ‘window’ prefix.
Learn javascript beginner !!!
Click to Learn More about – Javascript online learning
Syntax :
window.screen
or
screen
What happens when we invoke screen object ?
This object returns the actual browser display information like width,height etc.
There are many properties returned by the screen object listed below
1. width()
width() object returns the width of the screen
2. height()
height() object returns the height of the screen
3. availWidth()
availWidth() object returns the available width
4. availHeight()
availHeight() object returns the available height
5. colorDepth()
colorDepth() object returns the color depth
6. pixelDepth
pixelDepth() object returns the pixel depth.
1. With using ‘window’ object
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<script type="text/javascript">
document.writeln("<br/>The screen.width = "+window.screen.width);
document.writeln("<br/>The screen.height = "+window.screen.height);
document.writeln("<br/>The screen.availWidth = "+window.screen.availWidth);
document.writeln("<br/>The screen.availHeight = "+window.screen.availHeight);
document.writeln("<br/>The screen.colorDepth = "+window.screen.colorDepth);
document.writeln("<br/>The screen.pixelDepth = "+window.screen.pixelDepth);
</script>
</head>
<body></body>
</html>
2. Without using ‘window’ object
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<script type="text/javascript">
document.writeln("<br/>The screen.width = "+screen.width);
document.writeln("<br/>The screen.height = "+screen.height);
document.writeln("<br/>The screen.availWidth = "+screen.availWidth);
document.writeln("<br/>The screen.availHeight = "+screen.availHeight);
document.writeln("<br/>The screen.colorDepth = "+screen.colorDepth);
document.writeln("<br/>The screen.pixelDepth = "+screen.pixelDepth);
</script>
</head>
<body></body>
</html>
However, the output will be the same
Output :
The screen.width = 1680
The screen.height = 1050
The screen.availWidth = 1680
The screen.availHeight = 967
The screen.colorDepth = 24
The screen.pixelDepth = 24