ОБНОВЛЕНИЕ ОТВЕТСТВЕННОГО ДИЗАЙНА

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

Вот простой пример того, как веб-страница адаптируется к устройству, на котором она работает:

Обычно этого результата достигают, используя комбинацию CSS и HTML. Вы используете элемент области просмотра ‹meta›, создаете какой-то тип адаптивного макета сетки и пользуетесь преимуществами правил @media, широко известных как медиа-запросы.

РАССМОТРЕНИЕ ОТНОСИТЕЛЬНО НОВЫХ ФОРМ ФАКТОРОВ НА РЫНКЕ

Давайте поговорим о трансформируемых и съемных ноутбуках, также известных как ноутбуки 2-в-1.

Ноутбуки 2-в-1 существуют уже некоторое время (помните Compaq TC1000 с Windows * XP Tablet Edition?), Но в больших количествах их отгружают всего несколько лет. Microsoft * проложила путь в 2013 году с оригинальной Surface *, а Asus пользовалась популярностью благодаря своей серии Transformer, работающей на Android *. Примеры других примечательных съемных устройств: HP Spectre *, Lenovo Miix * и Acer Aspire Switch *. Несмотря на то, что производители не обязательно раскрывают количество продаваемых ими устройств, мы можем с уверенностью предположить, что в настоящее время используется несколько миллионов из них. Поэтому важно убедиться, что они поддерживаются наилучшим образом.

Давайте посмотрим на их особенности:

Трансформируемые ноутбуки - это ноутбуки с возможностью поворота, складывания или перемещения клавиатуры за дисплеем. На большинстве устройств шарнир расположен на стыке дисплея и клавиатуры. У них есть сенсорный дисплей.

Съемные устройства 2-в-1 - это устройства со съемной клавиатурой. В большинстве случаев часть клавиатуры предоставляет несколько дополнительных функций (если они вообще есть) (чаще всего это тачпад, как в HP Spectre x2). Однако клавиатуры некоторых съемных устройств предоставляют дополнительные функции, аналогичные функциям док-станции, такие как дополнительные порты ввода-вывода и дополнительные батареи. Например, Surface Book может использовать дискретный графический процессор в базе при подключении клавиатуры.

При подключении к клавиатуре дисплей съемного может либо свободно стоять на шарнире, либо требовать внешней поддержки, часто в виде подставки. У них также есть сенсорный дисплей.

ТРЕБОВАНИЯ 2-В-1 ДЛЯ ВЕБ-САЙТА; ДУМАЙТЕ ОБ ИСПОЛЬЗОВАНИИ

Учитывая популярность этих устройств, критически важно, чтобы ваш веб-сайт, даже отображаемый в классическом браузере для настольных ПК, работал с сенсорным экраном, а также с помощью мыши. Некоторые пользователи предпочитают прокручивать или прокручивать видео пальцами, в то время как другие предпочитают использовать мышь, чтобы делать то же самое. Вы должны ожидать, что пользователи будут взаимодействовать с веб-сайтом любым из этих методов.

Тем не менее, вы могли бы обеспечить лучший опыт, если бы адаптировали для каждого типа ввода: мышь / тачпад и сенсорный ввод. Причина в том, что каждый тип ввода отлично справляется с определенными задачами: сенсорный ввод удобен и прост в использовании, а мышь или сенсорная панель обладают большей точностью.

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

Вот пример веб-сайта, который отлично работает с мышью, но ведет себя странно, когда вы переделываете / отсоединяете ноутбук:

Вы можете видеть, что на этом веб-сайте меню было разработано с предположением, что мышь / тачпад всегда будет присутствовать, поэтому его взаимодействие основано на наведении курсора. Однако вы можете видеть, что после отсоединения клавиатуры сенсорное взаимодействие не работает; подкатегории недоступны. С функциональной точки зрения он сломан.

С учетом этих соображений, как начать полностью поддерживать эти устройства?

ЗАПРОСЫ СМИ ДЛЯ ВЗАИМОДЕЙСТВИЯ

В CSS есть четыре медиа-запроса, чтобы помочь разработчикам узнать о том, что мы называем точностью или качеством ввода. Эти медиа-запросы помогают определить возможности доступных устройств ввода и называются интерактивными медиа-запросами.

указатель: Эта мультимедийная функция используется для запроса точности указывающего устройства для основного указывающего устройства (как определено браузером). Это может быть грубая, точная или нет. Хорошо обычно означает, что пользователь будет взаимодействовать со страницей с помощью мыши или сенсорной панели. Грубый обычно означает, что пользователь будет взаимодействовать со страницей с помощью прикосновения.

hover: эта функция мультимедиа используется, чтобы узнать, может ли устройство поддерживать наведение с помощью основного указателя. Это может быть hover или none.

any-pointer и any-hover идентичны мультимедийным функциям указатель и наведение, но они соответствуют объединение возможностей всех указывающих устройств, доступных пользователю. Обычно на трансформируемом / съемном устройстве в режиме ноутбука any-pointer: coarse истинно, как и any-pointer: fine (пользователь может использовать как сенсорный экран, так и тачпад / мышь). В этом случае hover: hover истинно (с помощью мыши) . При отключении или переключении в режим планшета только any-pointer: coarse истинно, а any-hover: none - истинно.

Для получения более подробной информации ознакомьтесь со спецификацией W3C здесь.

СТАТУС ДОСТАВКИ ЗАПРОСОВ ВЗАИМОДЕЙСТВИЙ

ОГРАНИЧЕНИЯ, КАСАЮЩИЕСЯ МЕДИА-ЗАПРОСОВ ДЛЯ ВЗАИМОДЕЙСТВИЯ

Медиа-запросы в целом обычно статичны, но некоторые из них динамические, например, связанные с размером области просмотра. Например, медиа-запрос width изменяет свое значение, если изменяется размер окна браузера. Однако на сегодняшний день медиа-запросы, относящиеся к вводу и взаимодействиям, не являются динамическими, что означает, что после загрузки начальной страницы значения медиа-запросов остаются прежними, даже если вы отсоединяете / переворачиваете портативный компьютер 2-в-1. Таким образом, если вы загружаете страницу при использовании устройства в режиме ноутбука, а затем отключаете / переворачиваете в режим планшета, значение медиа-запроса указатель будет соответствовать значениям точно и грубо, что неверно, поскольку нет доступной мыши. Он будет соответствовать грубому только в том случае, если вы изначально загрузили страницу в режиме планшета.

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

ИЗМЕНЕНИЯ В ХРОМЕ

В 2017 году Intel решила решить указанную выше проблему, чтобы поддерживать медиа-запросы динамического взаимодействия для всех соответствующих ОС.

Изменения для Windows *: https://codereview.chromium.org/2737123003, https://codereview.chromium.org/2690323002 и https://chromium-review.googlesource.com/c/566567/ 3

Изменения для Linux * / Chrome OS *: https://codereview.chromium.org/2827803002 и https://chromium-review.googlesource.com/c/508212/

Изменения для Android: https://chromium-review.googlesource.com/c/553457/

Когда все эти изменения включены в стабильные выпуски (скорее всего, Chrome 62), медиа-запросы взаимодействия будут динамически реагировать на входные изменения. Итак, давайте посмотрим, как вы можете использовать это в своем коде.

КАК ИСПОЛЬЗОВАТЬ НОВЫЕ ЗАПРОСЫ ДИНАМИЧЕСКОГО ВЗАИМОДЕЙСТВИЯ

Одна очень простая вещь, которую вы можете сделать при отсоединении или переворачивании 2-в-1, - это увеличить размер кнопок, чтобы облегчить взаимодействие с ними при касании.

Давайте посмотрим на очень простой пример кода:

А это выглядит так:

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

ЗАПРОСЫ ДИНАМИЧЕСКОГО ВЗАИМОДЕЙСТВИЯ СМИ НА ДРУГИХ ПРОДАВЦАХ БРАУЗЕРОВ

Насколько мне известно, Apple * Safari на самом деле не занимается медиа-запросами с динамическим взаимодействием. В настоящее время нет оборудования Mac * с сенсорным экраном, а iOS * не поддерживает ввод с помощью мыши. Microsoft Edge * поддерживает интерактивные медиа-запросы, но они не являются динамическими (вам необходимо перезагрузить страницу после отсоединения / переворачивания). Я открыл ошибку / запрос функции для этого. Вы можете прокомментировать, что вам нужна эта функция, чтобы Microsoft могла соответственно расставить приоритеты.

Mozilla * Firefox * пока не поддерживает интерактивные медиа-запросы. Здесь обнаружена ошибка, не стесняйтесь комментировать, говоря, что вам нравится эта функция (и динамическая тоже!).

ЗАКЛЮЧИТЕЛЬНЫЕ МЫСЛИ И БУДУЩАЯ РАБОТА

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

Одна вещь, которую эта спецификация не охватывает, и, пожалуйста, дайте мне знать, если вы хотите, чтобы она была охвачена, - это возможность узнать наличие или отсутствие клавиатуры. Мне любопытно узнать о вариантах использования, поэтому пишите мне в twitter.

Об авторе

Алексис Менард - инженер-программист в Intel. Его основное внимание уделяется постоянно развивающейся веб-платформе, иммерсивной сети, которая включает в себя работу над стандартами W3C, а также над Blink / Chromium.