How Can I Get Screen, Web Page, and Browser Window Dimensions Across Different Browsers?-JS Tutorial-php.cn

How Can I Get Screen, Web Page, and Browser Window Dimensions Across Different Browsers?

Patricia Arquette

Release： 2024-12-19 01:45:09

Original

170 people have browsed it

How Can I Get Screen, Web Page, and Browser Window Dimensions Across Different Browsers?

Obtaining Screen, Web Page, and Browser Window Dimensions Across Major Browsers

To capture the dimensions of various screen and window elements in all major browsers, consider utilizing the following techniques:

Current Screen Dimensions

Access the screen object to retrieve screen width and height:

window.screen.height;
window.screen.width;

Copy after login

Current Web Page Dimensions

For HTML document size, utilize jQuery:

// Size of HTML document (similar to pageHeight/pageWidth)
$(document).height();
$(document).width();

Copy after login

Browser Window Dimensions

jQuery can also retrieve browser window dimensions:

// Size of browser viewport
$(window).height();
$(window).width();

Copy after login

Legacy Calculations

For legacy browsers, it was common to use a combination of window and document properties to obtain dimensions:

windowHeight = window.innerHeight || document.documentElement.clientHeight;
windowWidth = window.innerWidth || document.documentElement.clientWidth;
pageHeight = document.body.scrollHeight;
pageWidth = document.body.scrollWidth;
pageX = window.pageXOffset || document.documentElement.scrollLeft;
pageY = window.pageYOffset || document.documentElement.scrollTop;
screenHeight = window.screen.availHeight || window.screen.height;
screenWidth = window.screen.availWidth || window.screen.width;
screenX = window.screen.availLeft || window.screen.x;
screenY = window.screen.availTop || window.screen.y;

Copy after login

The above is the detailed content of How Can I Get Screen, Web Page, and Browser Window Dimensions Across Different Browsers?. For more information, please follow other related articles on the PHP Chinese website!