Медиа-запросы CSS и ширина окна JavaScript не совпадают

Для адаптивного шаблона у меня есть медиа-запрос в моем CSS :

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

. И я сделал функцию jQuery для изменения размера до ширины журнала :

$(window).resize(function() {
 console.log($(window).width());
 console.log($(document).width()); /* same result */
 /* something for my js navigation */
}

. И есть разница с обнаружением CSS и результатом JS, у меня есть эта мета:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

Полагаю, это из-за полосы прокрутки (15 px ). Как я могу сделать это лучше?