WINDOW SCREEN JAVASCRIPT
The screen Object
The screen
object contains information about the user's display and color pixeles of the screen.
This object is used to get information like screen width, screen height, color-depth etc.
There are many different properties of screen
objects that return information about the screen. The following table shows property names with their descriptions.
Property | Description |
---|---|
height | Returns height of screen |
width | Returns width of screen |
availHeight | Returns height of screen which is available to display purpose, excluding menubar and similar things |
availWidth | Returns width of screen which is available to display purpose, excluding menubar and similar things |
colorDepth | Returns color depth of user's screen |
orientation | Return an object having information about orientation of device |
The screen
is a global object so we can use it directly without referring to the window
, i.e using window.source
and source
are both valid.
Get Height And Width Of Screen
The height
and width
property of the screen
object returns the height and width of the user's screen in pixels. These are read-only property
The following example shows how to get the height and width of the screen.
<button onclick="width()">Get Width</button>
<button onclick="height()">Get Height</button>
<script>
function width(){
var widthOfScreen = screen.width;
document.getElementById("width").innerHTML = "Width of screen is " + widthOfScreen + "px.";
}
function height() {
var heightOfScreen = screen.height;
document.getElementById("height").innerHTML = "Height of screen is " + heightOfScreen + "px.";
}
</script>
▶ Run the code
Get Available Height And Width Of Screen
The availHeight
and availWidth
property of screen
object returns the available height and width of the user's screen in pixels (Available height is maximum height browser's window will get if browser is maximised).
The following example shows how to get the available height and width of screen.
<button onclick="width()">Get Available Width</button>
<button onclick="height()">Get Available Height</button>
<script>
function width(){
var aWidth = screen.availWidth;
document.getElementById("width").innerHTML = "Available Width of screen is " + aWidth + "px.";
}
function height() {
var aHeight = screen.availHeight;
document.getElementById("height").innerHTML = "Available Height of screen is " + aHeight + "px.";
}
</script>
▶ Run the code
Get Screen Color Depth
The colorDepth
property returns the color depth of the user's screen. The color depth is the number of bits used for each color component in a single pixel, it is also known as bit depth.
The color depth shows how many different colors a device can produce. Example: 1bit color depth can produce 21 = 2 different colors, 2bit color depth can produce 22 = 4 and so on.
Most computers use 24bit or 32bit color depth. 24 bit use 8bit for each R, G and B, another 8bit in a 32bit computer used for transparency.
<button onclick="depth()">Get Color Depth</button>
<script>
function depth(){
var cDepth = screen.colorDepth;
document.getElementById("depth").innerHTML = "Color Depth of your device is " + cDepth + "bits.";
}
</script>
▶ Run the code
Get Orientation Of Device
The orientation
property of the screen
object returns orientation of the window screen. The orientation
property returns an object 2 informations:
- type - That show orientation type, i.e landscape or vertical
- angle - That show screen angle of the device
<button onclick="orien()">Get Orientation</button>
<script>
function orien(){
var orienType = screen.orientation.type;
var orienAngle = screen.orientation.angle;
document.getElementById("orien").innerHTML = "Screen orientation is " + orienType + " and angle is " + orienAngle;
}
</script>
▶ Run the code