Форум

Методология

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

Платформа

Сообщество

desktop
touch-pad
touch-phone

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

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', 'ua'], function(provide, bemDom, Ua) {

provide(bemDom.declBlock(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this.findParentBlock(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', 'ua'], function(provide, bemDom, Ua) {

provide(bemDom.declBlock(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this._ua = this.findParentBlock(Ua);

                this
                    ._events(this.ua)
                    .on({ modName : 'orient', modVal : '*' }, this._onOrientChange, this);

                this.setMod('orient', this._ua.getMod('orient'));
            }
        },

        '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, подменяет свое содержимое при смене ориентации устройства.

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