window.screen

最新推荐文章于 2022-04-21 14:24:08 发布

weixin_33795093

最新推荐文章于 2022-04-21 14:24:08 发布

阅读量991

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/positive/p/3444928.html

博客介绍了使用JavaScript获取屏幕和网页宽高的方法。如window.screen.availWidth和availHeight可获取屏幕空白空间的宽高，window.screen.width和height能得到屏幕分辨率宽高，还提到了获取浏览器窗口宽度及网页宽高的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间) （1160像素，少了40像素？？？）
window.screen.width 返回当前屏幕宽度(分辨率值) $(window).width()为浏览器窗口的宽度
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetWidth; 返回当前网页宽度（网页的宽度为1904，少了16像素????）

window.document.body.offsetHeight; 返回当前网页高度（若网页中只有一个100像素高的div，此值就为100px）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5         <title>window.screen</title>    
 6         <script type="text/javascript" src='js/jquery.js'></script>    
 7         <script type="text/javascript">            
 8             $(function(){
 9                 console.log(window.screen.availWidth);             //1920
10                 console.log(window.screen.availHeight);             //1160
11                 console.log(window.screen.width);                 //1920
12                 console.log(window.screen.height);                 //1200
13                 console.log(window.document.body.offsetWidth);   //1904
14                 console.log(window.document.body.offsetHeight);     //500
15             })
16         </script>
17     </head>
18     <body>        
19         <div style='width:100px; height:500px;'></div>
20     </body>
21     </html>