Современные сайты приспосабливают для мобильных устройств. Если сайт не адаптирован под мобильные, то он теряет часть своей аудитории, потому что поисковые системы не показывают его в результатах для мобильных пользователей. Но как определить, является ли устройство пользователя мобильным?
Как было раньше
Факт того, что сайт просматривается на мобильном устройстве, определяется по ширине экрана. Если ширина меньше 1200 пикселей, то по-любому это мобильный и надо показывать адаптированную версию сайта. Если больше 1200 пикселей, то это персональный компьютер.
Как стало сейчас
Всё бы было хорошо, но человечество развилось до такой стадии, что разрешение экранов мобильных устройств больше чем у большинства настольных компьютеров. Как теперь жить!? Как теперь определять, какую версию сайта кому показывать?
Получается, придётся работать над адаптацией сайтов минимум в 2 раза дольше и использовать более сложные методы выбора версий сайта. Это неизбежно приведёт к удорожанию процесса сайтостроения и убьёт на старте все сайты с низким бюджетом. С другой стороны, в интернете начнут доминировать сайты с одинаковым шаблонным дизайном "из коробки". Потому что проще поставить шаблонный дизайн, чем разрабатывать свой!
Пример из жизни
Делаю сайт на заказ. Заказчик попросил адаптацию под мобильные платформы. После нескольких недель работы сайт закончили. Всё получилось отлично: шик, блеск, красота!
Заказчик заходит на сайт через устройство Samsung SM-T805 с шириной экрана 2560 пикселей! CSS подставляет стили для широких экранов как для персональных компьютеров. Но у мобильных браузеров есть ограничения по функционалу по сравнению с версиям для персональных компьютеров. В итоге, сайт отображается не так, как надо.
По ширине экрана 2560 пикселей - это настольный компьютер, по факту - мобильное устройство. Ему показывается ПК версия, на которой не работает часть сайта, потому что в мобильном браузере заблокирован функционал.
Кто виноват?
Ширина экрана не даёт представления о мобильности устройства. Поэтому нужна новая концепция определения мобильного устройства.
Разве так сложно браузерам самим передавать факт того, что для них более/менее предпочтительна мобильная версия? Браузер должен сам выбирать нужную версию.
Нашёл хороший способ. У мобильных устройств пиксели меньше и их плотность выше. Поэтому для определения можно использовать такую конструкцию:
@media (max-resolution: 300dpi) {}
У Samsung SM-T805 - 320dpi.