Разработка мобильных интерфейсов — непростая задача. Иногда по разным причинам пользователю недоступен функционал Web-приложения в мобильной версии. Что делать если десктопа под рукой нет?

Представьте, вам присылают макет интерфейса:

1. Desktop-версия, содержит очень много функционала.

2. Mobile-версия, отображает сообщение "Функционал не доступен. Откройте приложение на Desktop".

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

А что если не получится?

Тогда в этом случае, максимум что вы можете сделать — включить поддержку отображения Desktop версии на мобильных устройствах с помощью опции "Версия для ПК", чтобы пользователи могли воспользоваться недоступным функционалом.

Причины

Честно признаться что кейс описанные выше (когда дизайнер выключил функционал на мобильной версии) встречается редко, все же если вы его встретили — вы "счастливчик". Он довольно ярко демонстрирует то, в каком случае функция "Версия для ПК" необходима.

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

Причина №1. Нет функционала в мобильной версии

Бывает так, что команда решает не добавлять какую-либо функцию в мобильной версии (что нарушает принцип Mobile first), причины могут быть абсолютно разные, но в основном это то что "нет подходящего места для данного функционала" (ох уж это чувство прекрасного).

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

Ты пытаешься активировать функцию "Открыть на ПК", а у тебя открывается та же самая мобильная версия!

Иного выхода нет, приходится идти за ПК.

Причина №2. Функционал не работает в мобильной версии

Честно сказать тенденция делать релизы "как можно чаще" мне не особо нравится. Почему? Приведу пример, небольшое изменение в системе оплаты и цикл релиза в 2 дня породил баг. Разработчики сильно полагались на автотесты, они были уверены что блок оплаты наилучшим образом покрывал тестирование. Тестировщики в свою очередь, в состоянии гонки не так тщательно проверили уникальные кейсы, фокус был направлен на другие участки системы.

Каков итог? Часть пользователей с мобильной версии не смогли оплачивать услуги.

По логам было видно, что ряд пользователей попытался воспользоваться возможностью "Открыть на ПК", но как и в причине №1 получил ту же мобильную версию. Если же пользователи могли бы открыть версию для ПК, то проблему удалось бы обойти.

Я был в такой ситуации, приходилось искать ПК.

Причина №3. Дизайнер или руководитель не считают что мобильная версия важна

Хотя это может показаться странным, но такое встречается. Аргументом руководства может быть то, что приложение используется только на Desktop устройствах и поддержки Mobile версии не планируется.

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

Тот самый 1% пользователь в 1% случаев когда ему "кровь из носа" понадобится доступ к приложения с мобильного устройства скажет вам спасибо (конечно нет, но как минимум не уйдёт к конкурентам у которых есть мобильная версия, а у вас будет зарплата).

Причина №4. В стилях есть ошибка

Как правило такое часто происходит при модицикациях стилей, или переходе на новый дизайн. Может так случиться что часть функционала просто не будет отображаться на мобильной версии.

Это всего лишь пару ситуаций которые могут привести к ошибкам, в последствии которых пользователь не сможет воспользоваться фукнцией (или перейти на страницу) в мобильной версии, поэтому возможность открыть Desktop версию на мобильном устройстве может быть спасением для пользователя

Как активировать?

В мобильных браузерах есть опция "Версия для ПК", нажав на которую по идее вы получите Desktop версию, вот как она выглядит:

После того как вы сделаете тап на элементе "Версия для ПК" браузер перезагрузит страницу и отправит заголовок User-Agent такой, как будто вы бы использовали Desktop клиент.

Некорректная работа "Версии для ПК"

Для примера был взят сайт pitchme.co, но вы самостоятельно можете проверить любой другой. В таблице, в первом столбце изображён скриншот мобильной версии, во втором столбце мобильной версии с включенной опцией "Версия для ПК", в третьем столбце показана Desktop версия.

В мобильной версии с включенной опцией "Версия для ПК" мы видим Burger меню, точно такое же как и в первом столбце (Mobile версия), и в целом отличный Layout от Desktop версии. При правильной работе, мы должны были получить точно такое же отображение как в 3 столбце (Desktop версия)

Корректная работа "Версии для ПК"

Для примера мы возьмем сайт mvideo.ru. Скажу сразу, что я не имею никакого отношения к магазину mvideo, но с помощью него получается наглядный пример.

В данном случае, сразу в глаза бросается похожий Layout, и действительно, если мы сравним 2 и 3 столбец (Mobile "Версия для ПК" и Desktop) мы практически не увидим отличий.

Но есть что улучшать, все таки сходство с Desktop версией неполное.

Как включить поддержку на клиенте

Если вы придерживаетесь подхода Mobile-first или используете UI фреймворки особых проблем не возникнет, т.к есть разграничение Mobile/Desktop на основе CSS, также в случае UI фреймворков с этим отлично помогает использование сетки.

Код сниппета:

var m = document.createElement('meta');
m.setAttribute('name', 'viewport');

if (isMobile.any) {
  m.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')
} else {
  m.setAttribute('content', 'width=1024px')
}
document.querySelector('head').append(m);

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

Второе это скрипт создающий тег <meta>:

• В случае если пользователь зашел с мобильного устройства мы генерируем тег:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Честно признаться мне не нравится ограничение maximum-scale=1, user-scalable=no, но часто заказчики просят убрать зум (чтобы избежать зума на ios при фокусе на поле ввода), а дизайнеры не хотят увеличивать размер шрифта (при размере шрифта более 16px зум не будет происходить).

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

• В случае если пользователь зашёл с десктопной версии, тег выглядит так:

<meta name="viewport" content="width=1024">

Размер width необходимо отредактировать под вашу сетку (та ширина экрана от которого вы считаете что пользователь работает на десктопе).

Полный код сниппета (+ библиотека isMobile):

<script>(function () {var f=/iPhone/i,j=/iPod/i,p=/iPad/i,g=/\bAndroid(?:.+)Mobile\b/i,i=/Android/i,d=/\bAndroid(?:.+)SD4930UR\b/i,e=/\bAndroid(?:.+)(?:KF[A-Z]{2,4})\b/i,c=/Windows Phone/i,h=/\bWindows(?:.+)ARM\b/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/\b(CriOS|Chrome)(?:.+)Mobile/i,o=/Mobile(?:.+)Firefox\b/i;function b($,a){return $.test(a)}function a($){var a=($=$||("undefined"!=typeof navigator?navigator.userAgent:"")).split("[FBAN");void 0!==a[1]&&($=a[0]),void 0!==(a=$.split("Twitter"))[1]&&($=a[0]);var r={apple:{phone:b(f,$)&&!b(c,$),ipod:b(j,$),tablet:!b(f,$)&&b(p,$)&&!b(c,$),device:(b(f,$)||b(j,$)||b(p,$))&&!b(c,$)},amazon:{phone:b(d,$),tablet:!b(d,$)&&b(e,$),device:b(d,$)||b(e,$)},android:{phone:!b(c,$)&&b(d,$)||!b(c,$)&&b(g,$),tablet:!b(c,$)&&!b(d,$)&&!b(g,$)&&(b(e,$)||b(i,$)),device:!b(c,$)&&(b(d,$)||b(e,$)||b(g,$)||b(i,$))||b(/\bokhttp\b/i,$)},windows:{phone:b(c,$),tablet:b(h,$),device:b(c,$)||b(h,$)},other:{blackberry:b(k,$),blackberry10:b(l,$),opera:b(m,$),firefox:b(o,$),chrome:b(n,$),device:b(k,$)||b(l,$)||b(m,$)||b(o,$)||b(n,$)},any:!1,phone:!1,tablet:!1};return r.any=r.apple.device||r.android.device||r.windows.device||r.other.device,r.phone=r.apple.phone||r.android.phone||r.windows.phone,r.tablet=r.apple.tablet||r.android.tablet||r.windows.tablet,r}window.isMobile=a();})();(function() {var m = document.createElement('meta');m.setAttribute('name', 'viewport');if (isMobile.any) {m.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1')} else {m.setAttribute('content', 'width=1024px')}document.querySelector('head').append(m);})();</script>

Скрипт обязательно нужно вставлять выше любых стилей в тег head, иначе ничего не будет работать. Сжатый код (Deflate) весит 773 байта.

Код сниппета содержит старую версию библиотеки isMobile (не обновлял несколько лет), вы можете обновить её самостоятельно.

Если вы используете SSR, вам необходимо будет передать User-Agent при вызове библиотеки is-mobile.

Вместо заключения

Не стоит беспокоиться о тех пользователях, которые зайдут с настоящего десктопа, у них будет отображена корректная версия, т.к тег meta с атрибутом name=viewport никак не влияет на поведение браузера на десктопе (хотя возможно какие-нибудь уникальные браузеры это учитывают)

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

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

Сталкивались ли вы с ограничением функционала на мобильной версии?