ua

Блок служит для сбора данных о браузере пользователя.

Обзор

Элементы блока

Элемент	Способы использования	Описание
svg	`deps`	Проверяет, поддерживает ли браузер формат SVG.

Публичные технологии блока

Блок реализован в технологиях:

bh.js
bemhtml

Подробности

Блок подключает инлайновый скрипт, добавляющий тегу <html> CSS-классы, указывающие, включен ли JavaScript – ua_js_no/ua_js_yes.

Не имеет визуального представления на странице.

Используется внутри блока page и самостоятельно подключать его к странице обычно не требуется.

Элементы блока

Элемент `svg`

Элемент подключает инлайновый скрипт, добавляющий тегу <html> CSS-классы, указывающие, поддерживается ли SVG – ua_svg_no/ua_svg_yes.

Не имеет визуального представления на странице.

Для использования включите элемент в файл зависимостей deps.js блока, которому требуются данные о поддержке SVG:

Open in a new window

<div></div>

{
    shouldDeps: {
        block: 'ua',
        elem: 'svg'
    }
}

[
    null
]

ua

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

Обзор

Свойства и методы объекта

Имя	Тип	Описание
ua	`{String}`	Значение HTTP-заголовка юзер-агента.
ios	`{String}`\|`{undefined}`	Версия мобильной платформы iOS.
android	`{String}`\|`{undefined}`	Версия мобильной платформы Android.
bada	`{String}`\|`{undefined}`	Версия мобильной платформы Bada OS.
wp	`{String}`\|`{undefined}`	Версия мобильной платформы Windows Phone.
other	`{Boolean}`	Мобильная платформа неопределена.
opera	`{String}`	Версия браузера Opera.
chrome	`{String}`	Версия браузера Chrome.
iphone	`{Boolean}`	Устройство – iPhone.
ipad	`{Boolean}`	Устройство – iPad.
screenSize	`{String}`	Размер экрана устройства.
connection	`{String}`	Тип активного соединения.
dpr	`{Number}`	Относительная плотность пикселей.
flash	`{String}`\|`{undefined}`	Версия Adobe Flash.
video	`{Boolean}`	Поддержка видео.
width	`{Number}`	Ширина рабочей области экрана в px.
height	`{Number}`	Высота рабочей области экрана в px.
landscape	`{Boolean}`	Ориентация устройства.

Элементы блока

Элемент	Способы использования	Описание
dom	`JS`	Предоставляет набор модификаторов на основании свойств блока `ua` на тач-уровне.

Модификаторы элемента блока

Элемент	Модификатор	Допустимые значения	Способы использования	Описание
dom	platform	`'ios'`, `'android'`, `'bada'`, `'wp'`, `'other'`	`JS`	Мобильная платформа пользовательского устройства.
	browser	`'opera'`, `'chrome'`	`JS`	Тип браузера.
	ios	`'8'`, `'7'` ...	`JS`	Версия операционной системы для устройств iOS.
	ios-subversion	`'81'`, `'80'` ...	`JS`	Подверсия операционной системы для устройств iOS.
	android	`'4'`, `'3'` ...	`JS`	Версия операционной системы для устройств Android.
	screen-size	`'large'`, `'normal'`, `'small'`	`JS`	Размер экрана устройства.
	svg	`'yes'`, `'no'`	`JS`	Поддержка формата SVG.
	orient	`'landscape'`, `'portrait'`	`JS`	Ориентация устройства.

Публичные технологии блока

Блок реализован в технологиях:

js
bh.js
bemhtml

Подробности

Блок позволяет определить:

Версию мобильной платформы.
Типа браузера.
Версию браузера.
Тип соединения.
Наличие поддержки видео и SVG.
Поддержку технологии Adobe Flash.
Ориентацию и размер экрана.
Соотношение сторон экрана устройства.

modules.require('ua', function(ua) {

console.dir(ua);

});

Свойства и методы объекта

Свойство `ua`

Тип: {String}.

Тип мобильного браузера.

Свойство `ios`

Тип: {String|undefined}.

Версия мобильной платформы. Строка с номером версии, если платформа распознана как iOS.

Свойство `android`

Тип: {String|undefined}.

Версия мобильной платформы. Строка с номером версии, если платформа распознана как Android.

Свойство `bada`

Тип: {String|undefined}.

Версия мобильной платформы. Строка с номером версии, если платформа распознана как Bada OS.

Свойство `wp`

Тип: {String|undefined}.

Версия мобильной платформы. Строка с номером версии, если платформа распознана как Windows Phone.

Свойство `other`

Тип: {Boolean}.

Мобильная платформа неопределена. Устанавливается в значение true для всех мобильных платформ, кроме вышеперечисленных.

Свойство `opera`

Тип: {String}.

Версия браузера Opera.

Свойство `chrome`

Тип: {String}.

Версия браузера Chrome.

Свойство `iphone`

Тип: {Boolean}.

Значение true характеризует устройство как iPhone.

Свойство `ipad`

Тип: {Boolean}.

Значение true характеризует устройство как iPad.

Свойство `screenSize`

Тип: {String}.

Размер экрана устройства.

Доступны следующие значения:

large – размер экрана больше 320 px.
normal – размер экрана равен 320 px.
small – размер экрана меньше 320 px.

Свойство `connection`

Тип: {String}.

Тип активного сетевого соединения.

Доступны следующие значения:

wifi – соединение по Wi-Fi.
3g – соединение по 3G.
2g – соединение по EDGE и GSM.

Свойство `dpr`

Тип: {Number}.

Коэффициент относительной плотности пикселей. Характеризует отношение физических пикселей устройства к аппаратно независимым (dppx). Позволяет определить использует ли устройство дисплей с повышенной плотностью пикселей (например, Retina). По умолчанию 1.

Например, можно проверить, что устройство использует Retina и отдавать браузеру изображения с высоким разрешением:

modules.require('ua', function(ua) {

var imgFile = ua.dpr === 1 ? 'image.png' : 'image@2x.png';
// ···

});

Свойство `flash`

Тип: {String|undefined}.

Версия Adobe Flash. undefined, если Flash недоступен.

Свойство `video`

Тип: {Boolean}.

Значение true, если видео поддерживается.

Свойство `svg`

Тип: {Boolean}.

Значение true, если SVG поддерживается.

Свойство `width`

Тип: {Number}.

Ширина рабочей области экрана в пикселях.

Свойство `height`

Тип: {Number}.

Высота рабочей области экрана в пикселях.

Свойство `landscape`

Тип: {Boolean}.

Значение true при горизонтальной ориентации.

Элемент `dom` блока `ua`

Элемент служит для дополнения базовой БЭМ-сущности блока ua набором модификаторов на основе данных, собранных блоком ua на touch-уровне.

Это позволяет учитывать особенности мобильного устройства, проверяя наличие и значение модификаторов.

modules.define('ios-test', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this.findBlockOutside('ua').hasMod('platform', 'ios') &&
                    this.setMod('ios');
            }
        },
        'ios': function() {
            console.log('You are iOS user');
        }
    }
}));

});

Элемент автоматически подключается с блоком page. Не требуется подключать его вручную, если в проекте используется page.

Модификаторы элемента

Значения всех модификаторов элемента, кроме orient, устанавливаются в момент инициализации блока и остаются неизменными.

Модификатор `platform`

Допустимые значения: 'ios', 'android', 'bada', 'wp', 'other'.

Способ использования: JS.

Модификатор указывает мобильную платформу пользовательского устройства.

ios – iOS.
android – Android.
bada – Bada OS.
wp – Windows Phone.
other – все остальные мобильные платформы.

Модификатор `browser`

Допустимые значения: 'opera', 'chrome'.

Способ использования: JS.

Модификатор указывает тип мобильного браузера.

opera – Opera.
chrome – Chrome.

Модификатор `ios`

Допустимые значения: '8', '7' ...

Способ использования: JS.

Модификатор указывает версию операционной системы для устройств iOS.

Модификатор `ios-subversion`

Допустимые значения: '81', '80' ...

Способ использования: JS.

Модификатор указывает подверсию операционной системы для устройств iOS. Номер подверсии состоит из номера версии и первого символа после разделителя. Номер указывается без символов-разделителей '.'. Например, для iOS версии 8.1.3 значением модификатора будет '81'.

Модификатор `android`

Допустимые значения: '4', '3' ...

Способ использования: JS.

Модификатор указывает версию операционной системы для устройств Android.

Модификатор `screen-size`

Допустимые значения: 'large', 'normal', 'small'.

Способ использования: JS.

Модификатор указывает размер экрана пользовательского устройства.

large – размер экрана больше 320 px.
normal – размер экрана равен 320 px.
small – размер экрана меньше 320 px.

Модификатор `svg`

Допустимые значения: 'yes', 'no'.

Способ использования: JS.

Модификатор указывает на наличие у пользовательского устройства поддержки формата SVG.

yes – поддержка SVG присутствует.
no – поддержка SVG отсутствует.

Модификатор `orient`

Допустимые значения: 'landscape', 'portrait'.

Способ использования: JS.

Модификатор указывает текущую ориентацию устройства.

landscape – горизонтальная ориентация.
portrait – вертикальная ориентация.

Значение модификатора изменяется динамически при смене ориентации устройства. Поэтому можно подписываться на изменение значения модификатора:

modules.define('inner', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this._ua = this
                    .findBlockOutside('ua')
                    .on({ modName : 'orient', modVal : '*' }, this._onOrientChange, this);

                this.setMod('orient', this._ua.getMod('orient'));
            },
            '': function() {
                this._ua.un({ modName : 'orient', modVal : '*' }, this._onOrientChange, this);
            }
        },

        'orient': {
            'portrait': function() {
                this._reDraw('portrait');
            },
            'landscape': function() {
                this._reDraw('landscape');
            }
        }
    },

    _onOrientChange: function(e, data) {
        // переключаемся между значениям собственного модификатора `orient`
        this.setMod(data.modName, data.modVal);
    },

    _reDraw: function(orient) {
        // обновляем содержимое контейнера `inner` при смене ориентации устройства
        console.log(orient);
        BEMDOM.update(this.domElem, orient);
    }
}));

});

В примере блок-контейнер inner, вложенный в page, подменяет свое содержимое при смене ориентации устройства.

Object methods:

ua
ios
iphone
ipad
android
bada
wp
other
opera
chrome
screenSize
dpr
connection
flash
video
svg
width
height
landscape

Module ua

Detect some user agent features

Object methods:

ua()

description

User agent

ios()

description

iOS version

iphone()

description

Is iPhone

ipad()

description

Is iPad

android()

description

Android version

bada()

description

Bada version

wp()

description

Windows Phone version

other()

description

Undetected platform

opera()

description

Opera version

chrome()

description

Chrome version

screenSize()

description

Screen size, one of: large, normal, small

dpr()

description

Device pixel ratio

connection()

description

Connection type, one of: wifi, 3g, 2g

flash()

description

Flash version

video()

description

Is video supported?

svg()

description

Is SVG supported?

width()

description

Viewport width

height()

description

Viewport height

landscape()

description

Is landscape oriented?

ua__dom

Use ua module to provide user agent features by modifiers and update some on orient change

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

ua

Обзор

Элементы блока

Публичные технологии блока

Подробности

Элементы блока

Элемент svg

ua

Обзор

Свойства и методы объекта

Элементы блока

Модификаторы элемента блока

Публичные технологии блока

Подробности

Свойства и методы объекта

Свойство ua

Свойство ios

Свойство android

Свойство bada

Свойство wp

Свойство other

Свойство opera

Свойство chrome

Свойство iphone

Свойство ipad

Свойство screenSize

Свойство connection

Свойство dpr

Свойство flash

Свойство video

Свойство svg

Свойство width

Свойство height

Свойство landscape

Элемент dom блока ua

Модификаторы элемента

Модификатор platform

Модификатор browser

Модификатор ios

Модификатор ios-subversion

Модификатор android

Модификатор screen-size

Модификатор svg

Модификатор orient

Module ua

Object methods:

ua__dom

Элемент `svg`

Свойство `ua`

Свойство `ios`

Свойство `android`

Свойство `bada`

Свойство `wp`

Свойство `other`

Свойство `opera`

Свойство `chrome`

Свойство `iphone`

Свойство `ipad`

Свойство `screenSize`

Свойство `connection`

Свойство `dpr`

Свойство `flash`

Свойство `video`

Свойство `svg`

Свойство `width`

Свойство `height`

Свойство `landscape`

Элемент `dom` блока `ua`

Модификатор `platform`

Модификатор `browser`

Модификатор `ios`

Модификатор `ios-subversion`

Модификатор `android`

Модификатор `screen-size`

Модификатор `svg`

Модификатор `orient`