Lecaw

Учимся создавать Web-сайты

Совет: Не забывайте про мета-тег viewport

June 26, 2013 60hits

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

ДЕМО Исходные файлы

 

Если вы впервые сталкиваетесь адаптивным дизайном, хочу дать вам один совет: если вы разрабатываете гибкий дизайн, используйте мета тег viewport в заголовке страницы. В своей основной форме, он корректно установит ваш макет на различные мобильные устройства.

<meta name="viewport" content="width=device-width, initial-scale=1">

Проблемы

Давайте посмотрим на примере данного макета. Вы увидите, как он будет меняться при изменении размера окна браузера. Также там установлен один медиа-запрос, который делает текст крупнее и задает яркий #ff333e цвет заголовку на больших экранах. Прекрасно.

Вот как это выглядит в OSX Chrome:

И результат с уменьшенным размером окна браузера:

Теперь давайте посмотрим, как это выглядит на смартфоне (в данном случае IOS Safari на iPhone 4):

Первое что Вы заметите, будет красный заголовок. На мобильном телефоне, мы фактически смотрим на уменьшенную версию макета.

В iOS Safari, веб-страница 980px шириной уменьшается в масштабе, чтобы соответствовать размеру экрана (iPhone 4) 320px. Содержимое будет гораздо менее читаемым, если вы не увеличили масштаб. Почему?

Когда вы заходите на сайт через мобильный браузер он будет считать, что вы просматриваете сайт с десктопа и что вы хотите увидеть полное содержание сайта, а не только выведенное под мобильные устройства. Поэтому он установит ширину окна по размеру экрана телефона (как в случае IOS Safari) 980px.

Мета-тег Viewport

Введите мета-тег viewport, предоставленный Apple, далее принятым и разработанным другими компаниями.

Примерно так:

<meta name="viewport" content="">

В content=”” Вы можете ввести несколько значений разделяя их запятыми, но на данный момент мы собираемся сосредоточиться на основополагающих элементах.

Например, если ваш дизайн рассчитан специально под мобильные устройства размером экрана в 320px, вы можете указать ширину окна просмотра:

<meta name="viewport" content="width=320">

Для фиксированных макетов это более практично, укажите ширину области просмотра на рассматриваемом устройстве, так чтобы она соответствовала ширине вашего макета, которую вы ввели, например как на сайте высоких технологий:

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

Для большей уверенности, что ваш макет будет отображаться правильно, вы также можете установить уровень масштабирования. Например:

<meta name="viewport" content="initial-scale=1">

..Будет гарантировать, что при открытии, ваш макет будет правильно отображаться в масштабе 1:1. Конечно масштабирование все еще будет работать. Можно даже пойти дальше и заблокировать любое масштабирование от пользователя:

<meta name="viewport" content="maximum-scale=1">

Соединим все это

Все значения в одном месте:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Как вы можете заметить, все отображается в правильном масштабе. Текст переносится вместо уменьшения, а наш визуальный помощник (красный заголовок) исчез.

Стандарты

Мета-тег Viewport было решение от Apple. Он был быстро принят на все платформах, но он никогда не был выдвинут W3C. Microsoft еще больше усугубила ситуацию, когда они выбрали в IE10 вместо мета-тега Viewport - CSS медиа-запросы, которые являются W3C стандартом.

Короче говоря, подобные свойства окна определяются в CSS правиле @viewport, а не внутри HTML.

@viewport{
    width: device-width;
}

Учитывая, что данный элемент находится в стадии разработки, для IE10 требуется префикс, который выглядит примерно так:

@-ms-viewport{
    width: device-width;
}

Это гораздо более элегантное решение, чем мета-тег, но поддерживается далеко не всеми браузерами. Теперь, убедитесь, что ваш адаптивный дизайн ведет себя в IE10 в качестве "SNAP MODE".

Об этом вы можете прочитать в статье IE10 Snap Mode and Responsive Design. от Tim Kadlec’s.

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий