javascript--5检测屏幕宽度

检测屏幕宽度

1.效果

当屏幕宽度>960 ，背景为红色；当屏幕宽度大于640，小于960 ，背景为红色；当小于640 ，背景为蓝色

2.js部分

遇到问题：
window.onresize = function() { 根据判断条件，变背景}；
这句话，只有调整大小，触碰窗口时才能 判断，以致于 一打开网页，不能判断，背景为白色
所以将这句话拆开 给function 一个函数名，一打开网页就调用函数，当触发窗口时在调用，注意：函数名（）加括号为立即调用,并且只调用一次，调用一次后就不执行了

3.封装的client()

目的：获取可视区域的宽度、高度

  //封装client 函数 检测屏幕宽度
    function client() {
        if(window.innerWidth != null) {// ie9+ 主流浏览器
            return {
                width : window.innerWidth,
                height : window.innerHeight
            }
        }
        else if(document.compatMode = "CSS1Compat") { //正常浏览器（声明DTD）
            return {
                width : document.documentElement.clientWidth,
                height : document.documentElement.clientHeight
            }
        }
        return {//怪异浏览器（没有声明头的）
            width : document.body.clientWidth,
            height : document.body.clientHeight
        }