CSS3 media max-width与$().width一点问题

最近在修改麻辣GIS的响应式的时候发现一个有趣的问题：麻辣GIS的响应式是依靠CSS3的media属性来实现的，但是使用jquery的 $().width() 来获取宽度，但是其结果并不一致。

问题分析

CSS代码

@media screen and (max-width: 940px){
    /* css code here */
}

js代码

$("#domid").width();

CSS中获取的是screen的宽度，而jquery中的 $().width() 获取的是dom的宽度，这里面在页面高度较小的情况下，这两者是相等的。但是当高度较高的情况下，浏览器会出现一个滚动条。

这时候，css获取的宽度是包括滚动条的宽度的，而jqury获取的是内部的宽度。

解决方案

如何使用js获取全部的宽度呢？可以用下面的方法。

完整代码版：

var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')
{
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0)
{
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

上面的写法有些啰嗦，可以封装成下面的函数

function viewport()
{
    var e = window
    , a = 'inner';
    if ( !( 'innerWidth' in window ) )
    {
    a = 'client';
    e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

调用方法：

var view = viewport();
view['width'];//宽度
view['height'];//高度

结语

一个小问题，之前没注意，在此记录，如有错误，希望多多指出。