Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

touch action CSS

touch action  CSS

Всем привет. Сегодня мы рассмотрим интересное свойство touch-action появившееся в спецификации css3. Данное свойство позволяет определять поведение пользователя при работе с сенсорным экраном, то есть данное свойство прежде всего предназначено для мобильных устройств. Итак, поехали!

Создадим обычный html файл и папку img где у нас будет лежать картинка mask.jpg.

В файле index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        Проверка работы свойства touch-action
    </title>
</head>
    <body>
    <style>
        img {
            touch-action: auto;
        }
    </style>
        <img src="img/mask.jpg" width="2000px" height="2000px">
    </body>
</html>

Так как работу свойства touch-action мы можем отследить только на сенсорных экранах, загружаем файл index.html и папку img c картинкой на смартфон. И запускаем на устройстве файл index.html в любом браузере. Что мы видим? Ну прежде всего мы видим нашу картинку. Теперь попробуем поскролить, я специально сделал размер картинки 2000x2000 px, поменяем масштаб. Как видите все работает.

Это стандартное поведение на сенсорном экране. И значение auto у свойства touch-action - это значение по умолчанию которое сообщает что нам доступны все действия на сенсорном экране. В принципе его можно не указывать.

Теперь давайте поменяем значение свойства touch-action на none

touch-action: none;

и перезальем файл index.html

В результате у нас перестанут работать все события на сенсорном экране, то есть теперь мы не можем скролить и менять масштаб.

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

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

touch-action: pan-x; - перемещение по оси x

touch-action: pan-y; - перемещение по оси y

touch-action: pinch-zoom; - масштабирование (приближение, удаление)

Есть также еще значения:

manipulation - разрешает сдвиг по осям и масштабирование

double-tap-zoom - приближение по клику по заданной области

cross-slide-x - перемещение поперек элемента

cross-slide-y - перемещение вдоль элемента

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

На этом данная статья подошла к концу. Не забывайте оставлять комментарии и задавать вопросы. Ну а я с вами прощаюсь. Желаю успехов и удачи! Пока!

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm