JavaScript Window Screen

Window Screen

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

Some properties:

screen.availWidth - available screen width

screen.availHeight - available screen height

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
document.write("可用宽度: " + screen.availWidth);
</script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
document.write("可用宽度: " + screen.availHeight);
</script>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function a(){ document.write( "屏幕分辨率为："+screen.width+"*"+screen.height +" "+ "屏幕可用大小："+screen.availWidth+"*"+screen.availHeight +" "+ "网页可见区域宽："+document.body.clientWidth +" "+ "网页可见区域高："+document.body.clientHeight +" "+ "网页可见区域宽(包括边线的宽)："+document.body.offsetWidth +" "+ "网页可见区域高(包括边线的宽)："+document.body.offsetHeight +" "+ "网页正文全文宽："+document.body.scrollWidth +" "+ "网页正文全文高："+document.body.scrollHeight +" "+ "网页被卷去的高："+document.body.scrollTop +" "+ "网页被卷去的左："+document.body.scrollLeft +" "+ "网页正文部分上："+window.screenTop +" "+ "网页正文部分左："+window.screenLeft +" "+ "屏幕分辨率的高："+window.screen.height +" "+ "屏幕分辨率的宽："+window.screen.width +" "+ "屏幕可用工作区高度："+window.screen.availHeight +" "+ "屏幕可用工作区宽度："+window.screen.availWidth ); } </script> </head> <body onload="a()"> </body> </html>

submit Reset Code

Automatic operation

JavaScript Window Screen

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]