JS获取屏幕分辨率及当前窗口宽高等数据
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
网页可见区域宽： 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
window.screen.colorDepth
像素/英寸 window.screen.deviceXDPI
window.innerWidth
window.innerHeight
getPageScale().pageWidth
getPageScale().pageHeight
实现效果：
代码实现：
index.html
<!DOCTYPE >
<html>
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
document.documentElement.clientWidth ==> 可见区域宽度 <input type="text" name="eleWidth" size="4"><br>
document.documentElement.clientHeight ==> 可见区域高度 <input type="text" name="eleHeight" size="4"><br>
网页可见区域宽：document.body.clientWidth <input type="text" name="availWidth" size="4"><br>
网页可见区域高：document.body.clientHeight <input type="text" name="availHeight" size="4"><br>
网页可见区域宽：document.body.offsetWidth (包括边线的宽) <input type="text" name="offsetWidth" size="4"><br>
网页可见区域高：document.body.offsetHeight (包括边线的高) <input type="text" name="offsetHeight" size="4"><br>
网页正文全文宽：document.body.scrollWidth <input type="text" name="scrollWidth" size="4"><br>
网页正文全文高：document.body.scrollHeight <input type="text" name="scrollHeight" size="4"><br>
网页被卷去的高：document.body.scrollTop <input type="text" name="scrollTop" size="4"><br>
网页被卷去的左：document.body.scrollLeft <input type="text" name="scrollLeft" size="4"><br>
网页正文部分上：window.screenTop <input type="text" name="screenTop" size="4"><br>
网页正文部分左：window.screenLeft <input type="text" name="screenLeft" size="4"><br>
屏幕分辨率的高：window.screen.height <input type="text" name="height" size="4"><br>
屏幕分辨率的宽：window.screen.width <input type="text" name="width" size="4"><br>
屏幕可用工作区高度：window.screen.availHeight <input type="text" name="aHeight" size="4"><br>
屏幕可用工作区宽度：window.screen.availWidth <input type="text" name="aWidth" size="4"><br>
window.screen.colorDepth：<input type="text" name="colorDepth" size="4"><br>
像素/英寸 window.screen.deviceXDPI：<input type="text" name="deviceXDPI" size="4"><br>
window.innerWidth：<input type="text" name="innerWidth" size="4"><br>
window.innerHeight：<input type="text" name="innerHeight" size="4"><br>
getPageScale().pageWidth：<input type="text" name="pageWidth" size="4"><br>
getPageScale().pageHeight：<input type="text" name="pageHeight" size="4"><br>
</form>
<script type="text/javascript">
var wineleWidth = 0;
var wineleHeight = 0;
var winWidth = 0;
var winHeight = 0;
var winscrollWidth =0;
var winscrollHeight = 0;
var winscrollTop = 0;
var winscrollLeft = 0;
var winscreenTop = 0;
var winscreenLeft = 0;
var winheight = 0;
var winwidth = 0;
var winavailHeight= 0;
var winavailWidth= 0;
var wincolorDepth =0;
var windeviceXDPI =0;
var wininnerWidth = 0;
var wininnerHeight = 0;
var winpageWidth = 0;
var winpageHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
function getEleWidth() {
if(document.documentElement.clientWidth){
wineleWidth = document.documentElement.clientWidth;
}
document.form1.eleWidth.value = wineleWidth;
}
// 获取浏览器窗口的可视区域的高度
function getEleHeight() {
if(document.documentElement.clientHeight){
wineleHeight = document.documentElement.clientHeight;
}
document.form1.eleHeight.value = wineleHeight;
}
function getOffsetWidth() {
if(document.documentElement.offsetWidth || document.body.offsetWidth){
winoffsetWidth = document.body.offsetWidth;
}
document.form1.offsetWidth.value = winoffsetWidth;
}
// 获取浏览器窗口的可视区域的高度
function getOffsetHeight() {
if(document.documentElement.offsetHeight || document.body.offsetHeight){
winoffsetHeight = document.body.offsetHeight;
}
document.form1.offsetHeight.value = winoffsetHeight;
}
// 获取浏览器窗口的可视区域的宽度
function getScrollWidth() {
if(document.documentElement.scrollWidth || document.body.scrollWidth){
winscrollWidth = document.body.scrollWidth;
}
document.form1.scrollWidth.value = winscrollWidth;
}
// 获取浏览器窗口的可视区域的高度
function getScrollHeight() {
if(document.documentElement.scrollHeight || document.body.scrollHeight){
winscrollHeight = document.body.scrollHeight;
}
document.form1.scrollHeight.value = winscrollHeight;
}
// 获取浏览器窗口水平滚动条的位置
function getScrollLeft() {
if(document.body.scrollLeft){
winscrollLeft = document.body.scrollLeft;
}
document.form1.scrollLeft.value = winscrollLeft;
}
// 获取浏览器窗口垂直滚动条的位置
function getScrollTop() {
if(document.body.scrollTop){
winscrollTop = document.body.scrollTop;
}
document.form1.scrollTop.value = winscrollTop;
}
function getScreenTop() {
if(window.screenTop){
winscreenTop = window.screenTop;
}
document.form1.screenTop.value = winscreenTop;
}
function getScreenLeft() {
if(window.screenLeft){
winscreenLeft = window.screenLeft;
}
document.form1.screenLeft.value = winscreenLeft;
}
function getWinheight() {
if(window.screen.height){
winheight = window.screen.height;
}
document.form1.height.value = winheight;
}
function getWinwidth() {
if(window.screen.width){
winwidth = window.screen.width;
}
document.form1.width.value = winwidth;
}
function getWinavailHeight() {
if(window.screen.availHeight){
winavailHeight = window.screen.availHeight;
}
document.form1.aHeight.value = winavailHeight;
}
function getWinavailwidth() {
if(window.screen.availWidth){
winavailWidth = window.screen.availWidth;
}
document.form1.aWidth.value = winavailWidth;
}
function getWincolorDepth() {
if(window.screen.colorDepth){
wincolorDepth = window.screen.colorDepth;
}
document.form1.colorDepth.value = wincolorDepth;
}
function getWindeviceXDPI() {
if(window.screen.deviceXDPI){
windeviceXDPI = window.screen.deviceXDPI;
}
document.form1.deviceXDPI.value = windeviceXDPI;
}
function getWininnerWidth() {
if(window.innerWidth){
wininnerWidth = window.innerWidth;
}
document.form1.innerWidth.value = wininnerWidth;
}
function getWininnerHeight() {
if(window.innerHeight){
wininnerHeight = window.innerHeight;
}
document.form1.innerHeight.value = wininnerHeight;
}
function getPageScale(){
if (typeof pageWidth !== "number") {
if (document.compatMode === "CSS1Compat") {
winpageWidth = document.documentElement.clientWidth;
winpageHeight = document.documentElement.clientHeight;
}else{
winpageWidth = document.body.clientWidth;
winpageHeight = document.body.clientHeight;
}
}
document.form1.pageWidth.value = winpageWidth;
document.form1.pageHeight.value = winpageHeight;
}
getEleHeight();
getEleWidth();
findDimensions();
getOffsetWidth();
getOffsetHeight();
getScrollWidth();
getScrollHeight();
getScrollLeft();
getScrollTop();
getScreenTop();
getScreenLeft();
getWinheight();
getWinwidth();
getWinavailHeight();
getWinavailwidth();
getWincolorDepth();
getWindeviceXDPI();
getPageScale();
getWininnerWidth();
getWininnerHeight();
//调用函数，获取数值
window.onresize=getEleHeight;
window.onresize=getEleWidth;
window.onresize=getOffsetWidth;
window.onresize=getOffsetHeight;
window.onresize=getScrollWidth;
window.onresize=getScrollHeight;
window.onresize=getScrollLeft;
window.onresize=getScrollTop;
window.onresize=getScreenTop;
window.onresize=getScreenLeft;
window.onresize=getWinheight;
window.onresize=getWinwidth;
window.onresize=getWinavailHeight;
window.onresize=getWinavailwidth;
window.onresize=findDimensions;
window.onresize=getWincolorDepth;
window.onresize=getWindeviceXDPI;
window.onresize=getPageScale;
window.onresize=getWininnerWidth;
window.onresize=getWininnerHeight;
</script>
</body>
</html>
getPage.html
参考菜鸟教程：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="demo"></div>
<script>
var txt = "";
txt += "<p>innerWidth: " + window.innerWidth + "</p>";
txt += "<p>innerHeight: " + window.innerHeight + "</p>";
txt += "<p>outerWidth: " + window.outerWidth + "</p>";
txt += "<p>outerHeight: " + window.outerHeight + "</p>";
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
getPageScale()方法获取浏览器视口大小
<!DOCTYPE >
<html>
<body>
<script type="text/javascript">
function getPageScale(){
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth !== "number") {
if (document.compatMode === "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
return {pageWidth, pageHeight};
}
function getInfo(){
var s = "";
s += " document.documentElement.clientWidth ==> 可见区域宽度 "+ document.documentElement.clientWidth+"<br>";
s += " document.documentElement.clientHeight ==> 可见区域高度 "+ document.documentElement.clientHeight+"<br>";
s += " 网页可见区域宽："+ document.body.clientWidth+"<br>";
s += " 网页可见区域高："+ document.body.clientHeight+"<br>";
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线的宽)"+"<br>";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的高)"+"<br>";
s += " 网页正文全文宽："+ document.body.scrollWidth+"<br>";
s += " 网页正文全文高："+ document.body.scrollHeight+"<br>";
s += " 网页被卷去的高："+ document.body.scrollTop+"<br>";
s += " 网页被卷去的左："+ document.body.scrollLeft+"<br>";
s += " 网页正文部分上："+ window.screenTop+"<br>";
s += " 网页正文部分左："+ window.screenLeft+"<br>";
s += " 屏幕分辨率的高："+ window.screen.height+"<br>";
s += " 屏幕分辨率的宽："+ window.screen.width+"<br>";
s += " 屏幕可用工作区高度："+ window.screen.availHeight+"<br>";
s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"<br>";
s += " 屏幕设置："+ window.screen.colorDepth +" 位彩色"+"<br>";
s += " 屏幕设置："+ window.screen.deviceXDPI +" 像素/英寸"+"<br>";
s += " window.innerWidth："+ window.innerWidth+"<br>";
s += " window.innerHeight："+ window.innerHeight+"<br>";
s += " getPageScale().pageWidth："+ getPageScale().pageWidth+"<br>";
s += " getPageScale().pageHeight："+ getPageScale().pageHeight+"<br>";
document.write(s);
}
getInfo();
getPageScale()
</script>
</body>
</html>
浙公网安备 33010602011771号