js获取屏幕分辨率与屏幕大小
发布时间：2015-06-03 编辑：jiaochengji.com
分享下js获取屏幕分辨率，即屏幕大小的方法，有需要的朋友参考下。
例子，js获取屏幕分辨率，用来控制网页宽度不错，根据显示器大小判断DIV宽度。
代码：
复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js获取屏幕分辨率_www.jiaochengji.com</title>
<meta name="author" content="Administrator" />
<!-- Date: 2011-10-25 -->
<script language="JavaScript">
function a(){
document.write(
"屏幕分辨率为："+screen.width+"*"+screen.height
+"<br />"+
"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可见区域宽："+document.body.clientWidth
+"<br />"+
"网页可见区域高："+document.body.clientHeight
+"<br />"+
"网页可见区域宽(包括边线的宽)："+document.body.offsetWidth
+"<br />"+
"网页可见区域高(包括边线的宽)："+document.body.offsetHeight
+"<br />"+
"网页正文全文宽："+document.body.scrollWidth
+"<br />"+
"网页正文全文高："+document.body.scrollHeight
+"<br />"+
"网页被卷去的高："+document.body.scrollTop
+"<br />"+
"网页被卷去的左："+document.body.scrollLeft
+"<br />"+
"网页正文部分上："+window.screenTop
+"<br />"+
"网页正文部分左："+window.screenLeft
+"<br />"+
"屏幕分辨率的高："+window.screen.height
+"<br />"+
"屏幕分辨率的宽："+window.screen.width
+"<br />"+
"屏幕可用工作区高度："+window.screen.availHeight
+"<br />"+
"屏幕可用工作区宽度："+window.screen.availWidth
);
}
</script>
</head>
<body onload="a()" >
</body>
</html>
京东商城根据分辨率调整页面的大小实例代码：
<script type="text/javascript">if (screen.width>=1280){document.write("<style type='text/css'>.w{width:1200px;}.middle{width:766px;}.right-extra{width:983px;}#search{width:332px;padding:1px;}#i-search{width:257px;}#tie{width:257px;}#tie li{width:252px;}#key{width:228px;}#btn-search{background:none;}#hotwords{width:410px;}#service dl{width:192px;padding-left:39px;}#service .fore1{padding-left:20px;}#service .fore5{width:200px;}#service li{padding:0 35px;}#madding-1 dl{width:235px;}#madding-1 .p-price{right:50px;}.madding-2 li,.madding-3 li{width:239px;}#newpros .mc{width:766px;}#newpros .mc ul{width:766px;}#newpros li{width:235px;}#slide{width:766px;}#slide ul{width:766px;}#slide li{width:766px;}.special .mc{width:763px;}.special li{width:234px;}</style>");} </script>
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js获取屏幕分辨率_www.jiaochengji.com</title>
<meta name="author" content="Administrator" />
<!-- Date: 2011-10-25 -->
<script language="JavaScript">
function a(){
document.write(
"屏幕分辨率为："+screen.width+"*"+screen.height
+"<br />"+
"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight
+"<br />"+
"网页可见区域宽："+document.body.clientWidth
+"<br />"+
"网页可见区域高："+document.body.clientHeight
+"<br />"+
"网页可见区域宽(包括边线的宽)："+document.body.offsetWidth
+"<br />"+
"网页可见区域高(包括边线的宽)："+document.body.offsetHeight
+"<br />"+
"网页正文全文宽："+document.body.scrollWidth
+"<br />"+
"网页正文全文高："+document.body.scrollHeight
+"<br />"+
"网页被卷去的高："+document.body.scrollTop
+"<br />"+
"网页被卷去的左："+document.body.scrollLeft
+"<br />"+
"网页正文部分上："+window.screenTop
+"<br />"+
"网页正文部分左："+window.screenLeft
+"<br />"+
"屏幕分辨率的高："+window.screen.height
+"<br />"+
"屏幕分辨率的宽："+window.screen.width
+"<br />"+
"屏幕可用工作区高度："+window.screen.availHeight
+"<br />"+
"屏幕可用工作区宽度："+window.screen.availWidth
);
}
</script>
</head>
<body onload="a()" >
</body>
</html>
京东商城根据分辨率调整页面的大小实例代码：
<script type="text/javascript">if (screen.width>=1280){document.write("<style type='text/css'>.w{width:1200px;}.middle{width:766px;}.right-extra{width:983px;}#search{width:332px;padding:1px;}#i-search{width:257px;}#tie{width:257px;}#tie li{width:252px;}#key{width:228px;}#btn-search{background:none;}#hotwords{width:410px;}#service dl{width:192px;padding-left:39px;}#service .fore1{padding-left:20px;}#service .fore5{width:200px;}#service li{padding:0 35px;}#madding-1 dl{width:235px;}#madding-1 .p-price{right:50px;}.madding-2 li,.madding-3 li{width:239px;}#newpros .mc{width:766px;}#newpros .mc ul{width:766px;}#newpros li{width:235px;}#slide{width:766px;}#slide ul{width:766px;}#slide li{width:766px;}.special .mc{width:763px;}.special li{width:234px;}</style>");} </script>
JS获取屏幕分辨率简单示例
js判断屏幕分辨率的方法解析
js判断屏幕分辨率的小例子
Js判断浏览器类型或屏幕分辨率
您可能感兴趣的文章：
js获取屏幕分辨率示例
js获取当前对象大小与屏幕分辨率
js检测屏幕分辨率的例子
JS获取屏幕尺寸大小实例
根据屏幕分辨率自动调整字体大小的js代码
js获取屏幕高度与宽度
JS获取屏幕高度与宽度方法
js双击鼠标自动滚动屏幕实例
js获取屏幕分辨率与屏幕大小
js获取浏览器屏幕分辨率
上一篇：js获取ie客户端ip与mac地址
下一篇：js获取浏览器屏幕分辨率
[关闭]