Отзывчивый веб-дизайн против пользовательского агента сниффинг

Функция mediaзапросов CSS3 привела ко многим интересным возможностям с точки зрения разработки веб-сайтов, которые приспосабливаются к различным размерам экрана и устройствам.

Однако на практике я начинаю понимать, что mediaфункция запросов CSS3 и весь процесс «Отзывчивый веб-дизайн» могут не оправдать своего обещания.

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

Предположим, у нас есть простая функция Javascript, которая просто выводит ширину экрана:

function foo()
{
   alert(screen.width);
}

На моем Blackberry Touch это выводит:

На моем Samsung Galaxy это выводит:

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

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

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

Вопрос: Итак ... как веб-разработчик, если я не могу полагаться на RWD или обнаружение функций, является ли анализ пользовательского агента (как обычно ненадежным, как всегда) действительно лучшим вариантом для обнаружения мобильных устройств?

web-development javascript css

— Channel72
источник

Если целью Responsive Web Design является (как утверждает Википедия ) «легкое чтение и навигация с минимумом изменения размера, панорамирования и прокрутки», то почему вас волнует, настольный это или мобильный? Важное значение имеет разрешение экрана устройства и его размер, а не тип устройства. Нет?

— Руах

Я предполагаю, что я говорю о том, что связь между «разрешением экрана» и фактическим размером экрана (например, сантиметрами / дюймами ширины экрана) становится все более преходящей.

— Channel72

Я думал, что вы должны что-то делать с медиа-запросом ширины устройства, потому что ширина / разрешение становятся все более неточными, особенно с плотностью пикселей на различных дисплеях, например, на устройствах Apple Retina. Итак, если ширина устройства находится в пределах общей ширины для мобильного устройства, тогда вы показываете другой макет. Для пользователей планшетов и настольных компьютеров я просто показываю ту же компоновку, т.е. ширину 1024 пикселя.

— Зуаллауз

@zuallauz, разве поддержка не device-widthочень плохая?

— Channel72

Почему бы не пойти на их единицы? Таким образом, содержимое смещается в зависимости от доступного текстового пространства ...

Ответы:

Перестаньте так сильно беспокоиться о конкретных устройствах.

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

Это будет становится все более трудно обнаружить с помощью разрешения экрана, и это будет только сложнее , поскольку все больше устройств выйти на рынке, но цель запросов СМИ не обнаружить устройство types.What запросов СМИ хорошо делают щипки на ваш проект , когда это больше не приятно использовать в текущих размерах. Если сайт начинает разваливаться на 550px в ширину, то не имеет значения, есть ли устройство с такими размерами или нет: вы устанавливаете точку останова там.

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

Обнюхивание пользовательского агента - как вы заявили - совершенно ненадежно. Я мог бы изменить свою строку User-agent на кавычки Шекспира, если бы я действительно хотел. Что ваш сайт решит о моем браузере тогда?

Пользовательские агенты также требуют много работы для обработки всех возможностей. У вас есть один для Firefox на Android? Хром на IOS? Дельфин на Фройо? Браузер WiiU? Чрезвычайно ограниченный браузер на моем старом телефоне LG? Рысь? IE 13? Ссылки? Лед ласка? Браузер Blackberry Playbook? Как вы оцениваете разницу между Opera, работающей на планшете, и Opera, работающей на телефоне?

Этот список может только расти с течением времени.

— Майк Госсманн
источник

Хорошо, расположение с 1 колонкой обычно подходит для смартфонов. Для планшета вы можете использовать 2 или даже 3 столбца, а для настольных ПК обычно работает 3 столбца. Независимо от того, идеальное количество отображаемых столбцов, как правило, зависит от биологических возможностей человеческого глаза , а не от разрешения экрана. Я хочу сказать, что было бы неплохо, если бы была более тесная взаимосвязь между разрешением экрана и вероятностью того, что обычный человек сможет легко сканировать ваш сайт визуально. По крайней мере, CSS3, похоже, предполагает такую корреляцию.

— Channel72

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

— Майк Госсманн

@ Channel72 1-колоночный макет хорошо подходит для любой ширины экрана . Едва ли имеет значение, является ли ширина экрана узкой, потому что это браузер для смартфона или браузер для настольного компьютера в огромном окне на гигантском мониторе. Адаптивный веб-дизайн пытается приспособить все сценарии соответствующим образом, независимо от агента пользователя.

— Эрик Кинг,

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

— Джон

Агенты пользователей тоже лгут. Если вы будете гуглить, вы найдете списки пользовательских агентов против реальности. Так что это проблема. Некоторые прибегают к настройке dpi, чтобы определить, какое это устройство или какое оно есть.

— обкрадывать
источник

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

— Джон