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

• 05, 07, 2015
•  bullgare
•  Angular.js, Mobile
• No Comments.

Идея описана здесь — 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

$smallScreenWidth: 450px;

_device_detector.scss

.__device_detector__ {
	$valDefault: 1;
	$valSmall: 10;

	position: absolute;
	top: -999em;
	left: -999em;

	z-index: $valDefault;

	@include media("max-width: #{$smallScreenWidth}") {
		z-index: $valSmall;
	}
	@include media("max-height: #{$smallScreenWidth}") {
		z-index: $valSmall;
	}
}

utils.js

...
/**
 * This service is for getting device's type according to it's width/height
 */
.factory('DeviceDetectorService', [function DeviceDetectorService() {
	var deviceTypes = {
			1: 'default',
			10: 'small'
		},
		className = '__device_detector__',
		el;

	return {
		/**
		 * Inserts 'div' element into DOM
		 */
		init: function init()
		{
			el = document.createElement('div');
			el.className = className;
			document.body.appendChild(el);
		},
		/**
		 * Gets device's type by media query
		 */
		getType: function getType()
		{
			var defaultType = deviceTypes[1];
			if (! el || ! ('getComputedStyle' in window)) {
				return defaultType;
			}

			var id = parseInt(window.getComputedStyle(el).getPropertyValue('z-index'), 10);
			return deviceTypes[id] || defaultType;
		}
	};
}]);

app.js

.run(['$rootScope', 'DeviceDetectorService', function ($rootScope, DeviceDetectorService)
{
	// инициализация
	DeviceDetectorService.init();
	// и сразу пример использования
	$rootScope.isSmallDeviceOnInit = 'small' === DeviceDetectorService.getType();
}])

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