（1）可用高度：减去顶部底部的工具栏的高度
window.screen.availWidth返回当前屏幕宽度(空白空间) window.screen.availHeight返回当前屏幕高度(空白空间)
（2）屏幕宽度：不关浏览器或者顶部底部工具栏的高度，在微信里出除去头部和底部的bar的高度和宽度。在手机端，可以获取手机屏幕的逻辑分辨率
window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.height返回当前屏幕高度(分辨率值)
（3）客户端高度：浏览器里面整个页面的高度
document.body.clientHeight
(4)可见可用高度
document.documentElement.clientHeight:浏览器里面页面的可用可见高度。
window.document.body.offsetHeight; 返回当前网页高度 window.document.body.offsetWidth;返回当前网页宽度
在<head>中引入 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ，不加这句，移动端都返回980。加上这句，PC和移动端都能正确获取。
设备宽度 var diviceWidth = document.documentElement.clientWidth;
设备高度 var diviceHeight = document.documentElement.clientHeight;
这样就可以获取到手机的分辨率了，比如iphone4 320*480
上面的说法是不正确的，如果是在微信里打开网页，获取到的宽度和高度不是手机的逻辑分辨率，高度比逻辑分辨率里的高度小，因为减去了顶部和底部的bar。
（1）可用高度：减去顶部底部的工具栏的高度
window.screen.availWidth返回当前屏幕宽度(空白空间) window.screen.availHeight返回当前屏幕高度(空白空间)
（2）屏幕宽度：不关浏览器或者顶部底部工具栏的高度，在微信里出除去头部和底部的bar的高度和宽度。在手机端，可以获取手机屏幕的逻辑分辨率
window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.height返回当前屏幕高度(分辨率值)
（3）客户端高度：浏览器里面整个页面的高度
document.body.clientHeight
(4)可见可用高度
document.documentElement.clientHeight:浏览器里面页面的可用可见高度。
window.document.body.offsetHeight; 返回当前网页高度 window.document.body.offsetWidth;返回当前网页宽度
在<head>中引入 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ，不加这句，移动端都返回980。加上这句，PC和移动端都能正确获取。
设备宽度 var diviceWidth = document.documentElement.clientWidth;
设备高度 var diviceHeight = document.documentElement.clientHeight;
这样就可以获取到手机的分辨率了，比如iphone4 320*480
上面的说法是不正确的，如果是在微信里打开网页，获取到的宽度和高度不是手机的逻辑分辨率，高度比逻辑分辨率里的高度小，因为减去了顶部和底部的bar。
ios-分辨率.png
（5）手机的物理分辨率：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n18" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">window.screen.width * window.devicePixelRatio</pre>
物理分辨率，又叫物理尺寸。是指屏幕的实际大小。大的屏幕同时必须要配备高分辨率，也就是在这个尺寸下可以显示多少个像素，显示的像素越多，可以表现的余地自然越大。
（5）手机的物理分辨率：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n18" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">window.screen.width * window.devicePixelRatio</pre>
物理分辨率，又叫物理尺寸。是指屏幕的实际大小。大的屏幕同时必须要配备高分辨率，也就是在这个尺寸下可以显示多少个像素，显示的像素越多，可以表现的余地自然越大。
网友评论