Всем привет! Столкнулся с проблемой, когда контрольные точки в медиавыражениях не совпадают с точками
$(window).width() (или
window.innerWidth). Это и правда так, или всё же я что-то не так делаю?
Покажу на примерах.
1)
https://codepen.io/psywalker/pen/WjJZbe - в этом примере верхний
div отвечает за медиавыражения, нижний за
$(window).width() (или
window.innerWidth), ну а
span -- это просто линейка в 600px, правый край которой и является нашей контрольной точкой (600px).
Здесь всё работает отлично. Сузьте экран ровно до правого края span и увидите, как все два div станут синими (
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 (
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). Или я ошибаюсь?
