Работаем для облака

Работаем для облака.

В новом мире мобильных устройств и облачных вычислений становится не так уж важно, насколько свежая версия браузера установлена у пользователя, — нам все равно приходится беспокоиться о массе других вещей. Считается, что инновацией, с которой началось все это безумие, стало устройство iPhone. С момента его появления Сеть кардинально изменилась в нескольких аспектах. Вслед за iPhone появился 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 или даже распознавать ситуацию и перенаправлять пользователя на другую версию веб-сайта, предназначенную специально для доступа к приложению с конкретного устройства.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *