浏览器的宽高

JS 宽高

function init(){
	console.log("屏幕宽高为："+screen.width+"*"+screen.height);
}

其它：

网页可见区域宽：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.availWidthHTML
精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 
offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 
offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 
offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

js获取移动端屏幕高度和宽度等设备尺寸，兼容性比较好的方法：

document.documentElement.clientWidth;
document.documentElement.clientHeight;

这段js代码得到的就是移动设备的可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320416(手机480 - 微信状态栏64)，iPhone 5里为320504，其他的计算方式兼容性均不好，

document.documentElement是个什么鬼？documentElement 是整个节点树的根节点root，即 标签，而body是子节点，要访问到body标签，在脚本中应该写：document.body

如下各种尺寸在移动端均不能获得真实的屏幕高度和宽度等设备尺寸

var h = "";
h += " 网页可见区域宽："+ document.body.clientWidth+"
";
h += " 网页可见区域高："+ document.body.clientHeight+"
";
h += " 网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)"+"
";
h += " 网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)"+"
";
h += " 网页正文全文宽："+ document.body.scrollWidth+"
";
h += " 网页正文全文高："+ document.body.scrollHeight+"
";
h += " 网页被卷去的上："+ document.body.scrollTop+"
";
h += " 网页被卷去的左："+ document.body.scrollLeft+"
";
h += " 网页正文部分上："+ window.screenTop+"
";
h += " 网页正文部分左："+ window.screenLeft+"
";
h += " 屏幕分辨率的宽："+ window.screen.width+"
";
h += " 屏幕分辨率的高："+ window.screen.height+"
";
h += " 屏幕可用工作区宽度："+ window.screen.availWidth+"
";
h += " 屏幕可用工作区高度："+ window.screen.availHeight+"
";
h += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"
";
h += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"
";
alert(h);