touch-action

Свойство touch-action применяется для определения по умолчанию действий со стороны пользователя на сенсорных экранах, например, панорамирование или изменение масштаба.

Оглавление:
  1. Синтаксис
  2. Значение
  3. Пример touch-action
  4. -ms-content-zooming
  5. Поддержка

Свойство touch-action предназначено для мультитач устройств. Спецификация Pointer Events рекомендуется W3C и переходит на следующий уровень DOM4. Проверить свой сайт на совместимость с устройствами мультитач можно на сайте modern.IE.

Синтаксис

touch-action: auto | none | pan-x | pan-y | pinch-zoom | manipulation | double-tap-zoom;

к меню ↑

Значение

auto
Прикасаясь пользователь может выполнять любое разрешенное поведение на сенсорном устройстве.
none
Отменяет действие назначенное по умолчанию.
pan-x
Сенсор разрешает двигать элемент по горизонтальной оси. Сдвиг выполняется с прокруткой содержимого к ближайшему дочернему элементу.
pan-y
Сенсор разрешает двигать элемент по вертикальной оси. Сдвиг выполняется с прокруткой содержимого к ближайшему дочернему элементу.
pinch-zoom
Разрешает увеличение содержания. Дополнительные сведения о увеличении содержания смотрите свойство -ms-content-zooming.
manipulation
Сенсор разрешает сдвиг по осям, уменьшение и увеличение, эквивалент значениям pan-x pan-y pinch-zoom.
double-tap-zoom
Увеличивает область просмотра двойным касанием. Значение double-tap-zoom не поддерживается Windows Store apps.
cross-slide-x
Движение элемента поперёк экрана.
cross-slide-y
Движение элемента вдоль экрана.

только одно значение для оси должно указываются.

Такие правила игнорируются:

touch-action: cross-slide-x pan-x;
touch-action: cross-slide-x cross-slide-y;
touch-action: cross-slide-x manipulation;
к меню ↑

Пример touch-action

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

CSS

canvas#fingerpainter {
  -ms-touch-action: none;
}

Простой образец касания сенсора и мышь как резерв

HTML

Если содержание располагается горизонтально и выходит за пределы экрана. Значение pan-x позволит пользователю прокручивать содержимое в левую и правую сторону. Для настольного браузера в CSS нужно добавить значение scroll:

<ul class="list">
<li class="listEntry">Панорамирование по горизонтали.</li>
</ul>
ul.list {
  overflow-x: scroll;
}
ul.list > li.listEntry {
  -ms-touch-action: pan-x;
}
к меню ↑

-ms-content-zooming

Свойство -ms-content-zooming разрешает или запрещает увеличение на сенсорном экране.

Это свойство поддерживается для тачпада начиная с Windows 8.

-ms-content-zooming: none | zoom;

none
Элемент не увеличивается.
zoom
Элемент увеличивается.

это свойство не имеет никакого эффекта, если переполнение разрешено для обоих осей.

Для поддержки всех тачпадов, элементы могут быть увеличены пользователем через значение pinch-zoom.

к меню ↑

Поддержка