PC端
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
注解:电脑屏幕的分辨率(包括屏幕底部导航栏和浏览器顶部导航栏和滚动条)(通过改变电脑分辨率改变)
屏幕可用区域的高: window.screen.availHeight
屏幕可用区域的宽: window.screen.availWidth
注解:电脑屏幕的分辨率(不包括屏幕底部导航栏和浏览器顶部导航栏以及滚动条)(通过改变电脑分辨率改变)
浏览器可用区域的宽:(可通过缩放窗口改变)
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
浏览器可用区域的高
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
最小值 chrome 1,IE 15, safari 67, firefox 57
注解:除去浏览器导航栏和滚动条
window.screen.height> window.screen.availWidth>h
但移动端的情况大不一样!
移动端:
window.screen.height
window.screen.width
得出的是屏幕的物理分辨率,即实际存在的像素数目
window.screen.availHeight
window.screen.availWidth
也是物理分辨率
而
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
得出的远远大于前两者!
因为这是逻辑分辨率!
注解:物理分辨率是屏幕上真实存在的像素相乘,逻辑分辨率是物理分辨率可以展示的分辨率!
详情:http://blog.csdn.net/phunxm/article/details/42174937/
以及 http://zhidao.baidu.com/link?url=xr0kV7IbRetzvfF1pcZQX34faTsqGk5aGlSWAfIs9kfoqbpi7IWddEGM4t6pBD33dGhCRNGhlmLwxj20SSak4a