屏幕分辨率参数识别

yessica__

已于 2023-03-31 10:15:05 修改

阅读量116

点赞数

分类专栏：前端文章标签：前端 html javascript html5

于 2023-03-31 10:11:32 首次发布

本文链接：https://blog.csdn.net/qq_37641027/article/details/129873565

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这个HTML页面展示了如何使用JavaScript获取屏幕分辨率、可用工作区尺寸以及网页可见区域的详细信息。通过`window.screen`和`document.body`对象的属性，可以获取到屏幕宽高、可用工作区宽高以及网页滚动后的可见区域尺寸等参数。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title></title>
 </head>

// 注意:document.body.offsetWidth 使用需要在body和html标签增加样式属性：width:100%;
function size(){
document.write(
"屏幕分辨率为："+window.screen.width+"*"+window.screen.height //最好是window.screen
+" "+
"屏幕可用大小："+window.screen.availWidth+"*"+window.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>
<body onLoad="size()" >
</body>
</html>