js获取屏幕分辨率 js取得屏幕大小

发布时间:2019-12-06编辑:脚本学堂
有关js获取屏幕分辨率的方法,京东商城根据分辨率调整页面大小的例子,js获取浏览器信息与屏幕分辨率的实例代码,需要的朋友参考下。

例子:
 

复制代码 代码示例:
<!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.jb200.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>