clientWidth和clientHeight

clientWidth 获取网页可视区域宽度（两种用法）
clientHeight 获取网页可视区域高度（两种用法）
注意：
调用者不同，意义不同：

• 盒子调用：指盒子本身。
• body/html调用：可视区域大小。

clientX和clientY

• clientX 鼠标距离可视区域左侧距离（event调用）
• clientY 鼠标距离可视区域上侧距离（event调用）

clientTop和clientLeft

• clientTop 指的是盒子border的高度
• clientLeft 指的是盒子border的宽度

获取屏幕可视区域的宽高

• ie9及其以上的版本:window.innerWidth/Height

• 标准模式（有DTD）（“CSS1Compat”）

  document.documentElement.clientWidth
  document.documentElement.clientHeight

• 怪异模式 （没有DTD）

document.body.clientWidth
document.body.clientHeight

• 封装的兼容性写法

    function client(){
        if(window.innerHeight !== undefined){
            return {
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        }else if(document.compatMode === "CSS1Compat"){
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        }else{
            return {
                "width": document.body.clientWidth,
                "height": document.body.clientHeight
            }
        }
    }

检测屏幕宽度（分辨率）
window.screen.width