- JavaScript Tutorial
- JavaScript Advantages and Disadvantages
- Adding JavaScript to html
- External JavaScript JS File – Advantages, Disadvantages, Syntax, Attributes
- JavaScript Syntax
- JavaScript Statements
- JavaScript Output
- JavaScript Comments
- Javascript Data Types
- JavaScript Variables
- JavaScript Scope of Variables
- JavaScript Operators
- Javascript ternary operator
- Javascript typeof Operator
- Javascript Arithmetic Operators
- Javascript Assignment
- JavaScript Functions
- JavaScript Anonymous Functions
- JavaScript Callback Functions
- JavaScript Objects
- JavaScript Events
- JavaScript Strings
- JavaScript String Methods
- JavaScript Numbers
- JavaScript Number Methods
- JavaScript Math Object
- JavaScript Date
- JavaScript Date Formats
- JavaScript Date Methods
- JavaScript Arrays
- JavaScript Array Methods
- JavaScript Boolean
- JavaScript Comparisons
- JavaScript Conditions
- JavaScript Switch statement
- JavaScript For loop
- JavaScript while loop
- JavaScript Break and Continue
- JavaScript Type Conversion
- JavaScript Regular Expressions
- JavaScript Errors
- JavaScript Debugging
- JavaScript Conventions
- JavaScript Best Practices
- JavaScript Common Mistakes
- JavaScript Reserved Words
- JavaScript Performance
- JSON Data, format, mime type and parsing
- JavaScript Form Validation
- Forms API
- JavaScript Objects Definition
- JavaScript Object Properties
- JavaScript Object Methods
- JavaScript Object Prototypes
- JavaScript Window Object
- JavaScript Window Screen
- JavaScript Cookies
- JavaScript Location Object
- JavaScript History
- JavaScript Window Navigator
JavaScript Window Screen
In previous chapter you learn about JavaScript Window object. In this chapter you will learn about window screen.
You can get user’s screen information using JavaScript window screen object. This properties can be use to improve user experience of user based on its screen details.
Window Screen
It is not mandatory to write window prefix with screen object. It can be written without window prefix
Properties of Window Screen object
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
- screen.colorDepth
- screen.pixelDepth
Window Screen Width
You can use JavaScript screen.width property to determine the client browser’s screen width in pixels.
Example
<!DOCTYPE html>
<html>
<body>
<p id="screenwidth"></p>
<script>
document.getElementById("screenwidth").innerHTML = "Your Screen Width: " + screen.width;
</script>
</body>
</html>Download the code Run the code
Window Screen Height
You can use JavaScript screen.height property to determine the client browser’s screen height in pixels.
Example
<!DOCTYPE html>
<html>
<body>
<p id="screenheight"></p>
<script>
document.getElementById("screenheight").innerHTML = "Your Screen Height: " + screen.height;
</script>
</body>
</html>Download the code Run the code
Available Screen Width
You can use JavaScript screen.availWidth property to determine the client browser’s screen available width in pixels without windows taskbar.
Example
<!DOCTYPE html>
<html>
<body>
<p id="screenwidth"></p>
<script>
document.getElementById("screenwidth").innerHTML = "Your Available Screen Width: " + screen.availWidth;
</script>
</body>
</html>Download the code Run the code
Available Screen Height
You can use JavaScript screen.availHeight property to determine the client browser’s screen available height in pixels without windows taskbar.
Example
<!DOCTYPE html>
<html>
<body>
<p id="screenheight"></p>
<script>
document.getElementById("screenheight").innerHTML = "Your Available Screen height: " + screen.availHeight;
</script>
</body>
</html>Download the code Run the code
Screen Color Depth
The screen.colorDepth property is use to determine the number of bits used to display one color.
Now a days all modern computers use 24 bit or 32 bit hardware for color resolution:
- 24 bits = 16,777,216 different “True Colors”
- 32 bits = 4,294,967,296 different “Deep Colors”
Older computers used 16 bits: 65,536 different “High Colors” resolution. Very old computers used only bits which results in only 256 different VGA colors only.
Example
document.getElementById("screencolor").innerHTML = "Your Screen Color depth: " + screen.colorDepth;
Screen Pixel Depth
You can use screen.pixelDepth property to deter mine pixel depth of screen.
Example
document.getElementById("screencolor").innerHTML = "Your Screen Color depth: " + screen.pixelDepth;
In modern computer systems, color depth and pixel depth properties are equal.