4.09.13, 20:25
1 комментарий
  Графика/PSD

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

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

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

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

Разрабатываем адаптивные дизайны по стандартам при помощи @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 лучше влиться в процесс разработки? Пожалуйста, расскажите нам в комментариях.

Реклама

Комментарии

  1. NorDULaN Пользователь offline 26 сентября 2013 16:03                    

    Помогает.. :D

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204