Контрольные точки в медиавыражениях и $(window).width() (или window.innerWidth) не совпадают?

[psywalker]

Всем привет! Столкнулся с проблемой, когда контрольные точки в медиавыражениях не совпадают с точками $(window).width() (или window.innerWidth). Это и правда так, или всё же я что-то не так делаю?

Покажу на примерах.
1) https://codepen.io/psywalker/pen/WjJZbe - в этом примере верхний div отвечает за медиавыражения, нижний за $(window).width() (или window.innerWidth), ну а span -- это просто линейка в 600px, правый край которой и является нашей контрольной точкой (600px).

Здесь всё работает отлично. Сузьте экран ровно до правого края span и увидите, как все два div станут синими (http://take.ms/ECczJ). А если жмякнуть ссылкой на span, то даже в консоли всё будет ровненько по 600px.

2) Но всё здорово ровно до того момента, пока не появляется вертикальный скролл. Сравним вариант со скроллом. https://codepen.io/psywalker/pen/jmxKxM?editors=0110. Теперь во всех браузерах (в Edge не тестил, не суть) кроме Safari сужение экрана до 600px врубает $(window).width(), а вот медиазапросы срабатывают только на 585px. Понятно, что медиазапросы учитывают скролл, который 15px. Но разночтение с $(window).width() уже очень расстраивает. А вот в Safari всё срабатывает так же, как без скролла, то есть ровненько на 600px (http://take.ms/f81ta). Следовательно, помимо разночтения при скролле мы ещё имеем разночтения в браузерах (Safari vs остальных).

3) Ок, попробуем поменять $(window).width() на window.innerWidth.  https://codepen.io/psywalker/pen/wdjXNM?editors=0110. Теперь во всех браузерах (в Edge не тестил, не суть) кроме Safari медиазапросы и window.innerWidth срабатывают в одной точке - 585px, а вот в Safari медиазапросы срабатывают на 600px, а вот window.innerWidth на 585px.

Итог:
Получается, что в данном случае нет единого мнения среди браузеров, и у нас нет возможности контролировать медиазапросы вместе с $(window).width() (или window.innerWidth). Или я ошибаюсь? И какие вы видите решения данной проблемы?

[andrey7287]

Ну во первых вы изначально сами себя запутали отождествляя window.innerWidth  с $(window).width() который на самом деле является аналогом document.documentElement.offsetWidth . Эти методы ( window.innerWidth и document.documentElement.offsetWidth ) позволяют получить ширину вьюпорта со скролом и соответственно без. C Сафари проблем быть не должно, не под виндой случаем запускаем )?

И ещё для медиазапросов в JS есть свои методы

var smallScreen = window.matchMedia("(max-width: 600px)").matches;

if ( smallScreen ) {

}

 

  

Edited May 15, 2017 by andrey7287