获取屏幕宽高和浏览器宽高

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

 

转载于:https://www.cnblogs.com/yanze/p/5978030.html