Реализация определения размера устройства в AngularJS

Идея описана здесь — https://blog.bullgare.com/2013/12/%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B8%D0%BF%D0%B0-%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0-%D0%B2-js-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-media/.
Т.е. через media-queries задавать параметры, которые определят размеры устройства, по этим параметрам менять z-index. Затем создать в js-файле такой элемент скрытым и считывать его z-index в любой момент.
Особенно это удобно делать в css-препроцессорах, чтобы параметризовать параметры media-queries. Тогда изменения внешнего вида сайта через css будут происходить одновременно с изменением функциональности js-приложения.
Единственный минус — надо синхронизировать значения z-index-ов между scss и js, но меняются они не часто.
Ниже приведу пример реализации на scss.

_variables.scss

_device_detector.scss

utils.js

app.js

При необходимости можно отслеживать изменение размеров окна, после чего оповещать об этом. Но в моём приложении этим занимается другой сервис, и тут не место его описывать.

LEAVE A COMMENT