В новом мире мобильных устройств и облачных вычислений становится не так уж важно, насколько свежая версия браузера установлена у пользователя, — нам все равно приходится беспокоиться о массе других вещей. Считается, что инновацией, с которой началось все это безумие, стало устройство iPhone. С момента его появления Сеть кардинально изменилась в нескольких аспектах. Вслед за iPhone появился iPad, и бесчисленное множество имитаций этих устройств заполонило новый рынок. Благодаря этому радикальному изменению в электронном мире мобильный доступ к Интернету превратился в повсеместную практику. Внезапно владельцы новых устройств стали важной целевой аудиторией веб-сайтов и веб-приложений, а разнообразие платформ, экранов и интерфейсов заставило разработчиков учиться адаптировать свои продукты к каждому возможному случаю.
Раз уж упомянули iPad — у его владельцев порой возникает необходимость в сервисном обслуживании и ремонте — здесь вы сможете получить квалифицированную помощь по доступной цене.
Сегодня независимо от того, какой тип технологий мы применяем, наши веб-сайты и приложения обязаны адаптироваться ко всем существующим платформам, сохраняя при этом единообразие и обеспечивая каждому возможность пользоваться нашими продуктами. К счастью, в HTML эти ситуации всегда принимали во внимание, и элемент <link> предоставляет атрибут media, позволяющий выбирать внешние ресурсы в соответствии с предопределенными параметрами.
Листинг З.3. Разные CSS-файлы для разных устройств
<!DOCTYPE html>
<html lang=»ru»>
<head>
<title>Главный документ</title>
<link rel=»stylesheet» href=»webstyles. css» media=»all and (min-width: 769px)»>
<link rel=»stylesheet» href=»tablet. css» media=»all and (min-width: 321px) and (max-width: 768px)»>
<link rel=»stylesheet» href=»phone. css» media=»all and (min-width: 0px) and (max-width: 320px)»>
</head>
<body>
</body>
</html>
Выбор CSS-стилей — несложный способ справиться с задачей. В соответствии с используемым устройством и размером его экрана мы загружаем разные файлы CSS и применяем соответствующие стили. Элементы HTML можно растрировать, адаптируя целые документы к конкретным размерам и обстоятельствам.
В листинге 3.3 мы добавили три разных CSS-файла, предназначенных для разных ситуаций. Для распознавания ситуации используются значения атрибута media, который присутствует в каждом теге <link>. Проверяя свойства min-width и max-width, мы выбираем тот CSS-файл, который подойдет к разрешению конкретного экрана, используемого для просмотра документа. Если размер экрана по горизонтали находится в диапазоне от 0 до 320 пикселов, то загружается файл phone. css. Для разрешения от 321 до 768 пикселов предназначен файл tablet. css. И наконец, для визуализации документа на экранах с шириной более 768 пикселов используется файл webstyles. css.
В этом примере мы учитываем три возможных сценария: документ отображается на экране небольшого смартфона, на планшете и на полноразмерном компьютере. Экраны этих устройств обычно характеризуются перечисленными размерами.
Разумеется, адаптация документов подразумевает изменение не только стилей CSS. Интерфейсы, предоставляемые этими устройствами, несколько отличаются от интерфейсов настольного компьютера из-за отсутствия таких физических компонентов, как клавиатура и мышь. Привычные события, например click и mouseover, в некоторых случаях заменяются событиями прикосновений. К тому же на мобильных устройствах чаще всего доступна еще одна важная новая функция — изменение ориентации экрана. Вследствие этого меняется размер пространства для отображения документа. Все эти отличия новых устройств от старых компьютерных интерфейсов делают почти невозможной адаптацию дизайна и функциональности путем простого добавления или модификации правил CSS. Приходится адаптировать коды с помощью JavaScript или даже распознавать ситуацию и перенаправлять пользователя на другую версию веб-сайта, предназначенную специально для доступа к приложению с конкретного устройства.
Добавить комментарий