—»     —»   Разрабатываем адаптивные дизайны по стандартам при помощи @viewport
  Раздел: CSS/Style Sheets   Комментариев: 1  

Разрабатываем адаптивные дизайны по стандартам при помощи @viewport




Один из ключевых концептов в любом адаптивном дизайне – это изменение размера окна просмотра. Это так потому, что размеры экранов мобильных устройств значительно отличаются от экранов настольных ПК. Для управления размером окна просмотра, мы обычно используем мета-тег viewport.

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

К счастью, совсем недавно W3C пришли к нам на помощь, и ввели новое CSS-правило @viewport.

Былые времена

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

<meta name='viewport' content='width=device-width'>

CSS-правило

Совершенно не зависимо от того, валиден ли мета-тег viewport, он представляет собой не данные, а всего лишь их представление. Так что, придерживаясь принципов разделения наших данных и их представления, viewport должен быть указан в CSS, а не в HTML.

W3C-решение в CSS выглядит следующим образом:

@viewport {
width: device-width;
}

С другой стороны, вы можете указать viewport цифрой, следующим образом:

@viewport {
width: 640px;
}

Вы можете использовать правило @viewport в сопровождении @media queries, чтобы любое окно просмотра больше 960 пикселей, уменьшалось до 960px:

@media screen and (min-width: 960px){
@viewport {
width: 960px;
}
}

Дополнительные свойства

Правило @viewport также позволяет нам масштабировать страницу по умолчанию, и даже выставлять максимальный порог увеличения:

@viewport {
width: 960px;
zoom: 1;
max-zoom: 3;
}

Также есть возможность полностью запретить масштабирование, установив свойство user-zoom на fixed. Тем не менее, масштабирование, особенно на смартфонах, необходимо для удобства использования, и мы бы не рекомендовали вам использовать это свойство.

Еще одно удобное свойство позволяет нам зафиксировать веб-страницу в пейзажной ориентации или в портретной:

@viewport {
orientation: landscape;
}

Браузерная поддержка

Здесь начинаются плохие новости: на данный момент это правило поддерживается только в IE10 и Opera, и требует приставок –ms- и –o- соответственно.

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

Заботитесь ли вы о том, чтобы коды соответствовал стандартам? Помогает ли вам W3C лучше влиться в процесс разработки? Пожалуйста, расскажите нам в комментариях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, CSS
Опубликовал Design FactoRy   Прочитано (раз): 5332   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 сентября 2013 @ 20:41
Написал: Кос-и-нус — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А что подразумевается под "требует приставок –ms- и –o-", не могли бы вы пояснить?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31