Функция mediaзапросов CSS3 привела ко многим интересным возможностям с точки зрения разработки веб-сайтов, которые приспосабливаются к различным размерам экрана и устройствам.
Однако на практике я начинаю понимать, что mediaфункция запросов CSS3 и весь процесс «Отзывчивый веб-дизайн» могут не оправдать своего обещания.
Проблема, которую я вижу, заключается в том, что, в конце концов, веб-разработчики в основном заботятся о том, чтобы их пользователи просматривали контент через настольный компьютер, планшет или мобильное устройство. Но CSS3 предоставляет только средства для определения разрешения экрана . Теоретически, определение разрешения экрана кажется отличным способом настройки для различных устройств. Но на практике ...
Предположим, у нас есть простая функция Javascript, которая просто выводит ширину экрана:
function foo()
{
alert(screen.width);
}На моем Blackberry Touch это выводит:
768На моем Samsung Galaxy это выводит:
800Итак ... на данный момент разрешение обычных смартфонов приближается к разрешению на уровне рабочего стола. Возможность определить, просматривает ли пользователь ваш сайт с помощью смартфона, планшета или настольного компьютера, кажется все более сложной, если все, что вам нужно, - это разрешение экрана.
Это заставляет меня подвергнуть сомнению всю мудрость всего движения CSS3 «Отзывчивый веб-дизайн», основанного на медиа-запросах. Похоже, что mediaфункция запроса лучше подходит для адаптации к окну браузера с изменением размера на экране рабочего стола, а не для различных мобильных устройств.
Другой возможный метод обнаружения мобильных или планшетных устройств - это использование функции обнаружения путем проверки, ontouchstartподдерживается ли событие. Но даже это становится ненадежным, так как многие экраны рабочего стола начинают поддерживать сенсорный экран.
Вопрос: Итак ... как веб-разработчик, если я не могу полагаться на RWD или обнаружение функций, является ли анализ пользовательского агента (как обычно ненадежным, как всегда) действительно лучшим вариантом для обнаружения мобильных устройств?
источник
device-widthочень плохая?Ответы:
Перестаньте так сильно беспокоиться о конкретных устройствах.
Это будет становится все более трудно обнаружить с помощью разрешения экрана, и это будет только сложнее , поскольку все больше устройств выйти на рынке, но цель запросов СМИ не обнаружить устройство types.What запросов СМИ хорошо делают щипки на ваш проект , когда это больше не приятно использовать в текущих размерах. Если сайт начинает разваливаться на 550px в ширину, то не имеет значения, есть ли устройство с такими размерами или нет: вы устанавливаете точку останова там.
То же самое относится и к обнаружению функций. Если устройство поддерживает сенсорный ввод, то какое это имеет значение, если это мобильное устройство или какой-нибудь будущий настенный монитор? В любом случае усовершенствования касания, вероятно, будут полезны.
Обнюхивание пользовательского агента - как вы заявили - совершенно ненадежно. Я мог бы изменить свою строку User-agent на кавычки Шекспира, если бы я действительно хотел. Что ваш сайт решит о моем браузере тогда?
Пользовательские агенты также требуют много работы для обработки всех возможностей. У вас есть один для Firefox на Android? Хром на IOS? Дельфин на Фройо? Браузер WiiU? Чрезвычайно ограниченный браузер на моем старом телефоне LG? Рысь? IE 13? Ссылки? Лед ласка? Браузер Blackberry Playbook? Как вы оцениваете разницу между Opera, работающей на планшете, и Opera, работающей на телефоне?
Этот список может только расти с течением времени.
источник
Агенты пользователей тоже лгут. Если вы будете гуглить, вы найдете списки пользовательских агентов против реальности. Так что это проблема. Некоторые прибегают к настройке dpi, чтобы определить, какое это устройство или какое оно есть.
источник