Briefly understand the application of window.screen object

This article brings you relevant knowledge about javascript, which mainly introduces issues related to the application of the window.screen object. The window.screen object contains information about the user's screen. Let's talk about it together. Take a look, hope it helps everyone.

[Related recommendations: javascript video tutorial, web front-end】

Window object

All browsers support the window object. It represents the browser window.

All JavaScript global objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document of the HTML DOM is one of the properties of the window object:

window.document.getElementById("header");

Same as this:

document.getElementById("header");

Window size

There are three ways to determine the size of the browser window (the browser's viewport, excluding toolbars and scroll bars).

For Internet Explorer, Chrome, Firefox, Opera and Safari:

window.innerHeight - The inner height of the browser window window.innerWidth - The inner width of the browser window

For Internet Explorer 8, 7, 6, 5:

document.documentElement.clientHeight document.documentElement.clientWidth

or

document.body.clientHeight document.body.clientWidth

Practical JavaScript solution (covers all browsers):

Example

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

This example displays the height and width of the browser window: (excluding toolbars/scrollbars)

Window Screen

The window.screen object contains information about the user's screen.

The window.screen object can be written without using the window prefix.

Some properties:

• screen.availWidth - available screen width

• screen.availHeight - Available screen height

Window Screen Available Width The screen.availWidth property returns the width of the visitor's screen, in pixels, minus interface features such as window tasks column.

Example

Return the available width of your screen:

<script>
document.write("可用宽度: " + screen.availWidth);
</script>

The output of the above code is:

##Window Screen Available Height

The screen.availHeight property returns the height of the visitor's screen, in pixels, minus interface features such as the window taskbar.

Example

Returns the available height of your screen:

<script>
document.write("可用高度: " + screen.availHeight);
</script>

The above code will output:

【Related Recommended:

javascript video tutorial, web front-end】

The above is the detailed content of Briefly understand the application of window.screen object. For more information, please follow other related articles on the PHP Chinese website!