Про @viewport

Устаревшая фигня! За прошедшие годы винфон и ИЕ умерли, а остальные браузеры не стали поддерживать @viewport.

Однажды чуваки из Оперы предложили вместо мета-тега <meta name="viewport" ...> использовать цсс-ный @viewport { ... }. Как, зачем и почему, послушайте у ппк, а я расскажу, зачем его стоит начать использовать прямо сейчас.

1. Правильный вьюпорт для винфонов

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

В портретном режиме разницы между айосью и винфоном не видно:

Windows Phone 8.1
iOS 7

В ландшафтном очевидна конскость на винфоне:

Windows Phone 8.1
iOS 7

Оказалось, традиционный мета-тег <meta name="viewport" content="width=device-width, initial-scale=1"> воспринимается винфоном как указание сделать вьюпорт шириной 320 (логических) пикселей не зависимо от разрешения девайса (потому что айфон).

Зато свежий сочный @viewport {width: device-width;}, который и поддерживается-то сейчас только в ИЕ 10 и 11 с префиксом, не только оверрайдит значение мета-тега, но и говорит винфону пользоваться его родным вьюпортом.

Теперь все как и должно быть:

Было
Стало

В портретном режиме тоже видны небольшие изменения (у HTC 8x больше разрешение, чем у айпода, ретинистость у обоих одинаковая, значит, вьюпорт на HTC должен быть немного шире 320 пикселей):

Было
Стало

На WP 8 до третьего обновления @-ms-viewport был забагованный, потому как смотрел не на логические пиксели, а на реальные, что приводило к слишком большому размеру вьюпорта (и слишком мелкому сайту) на ретинистых винфонах.

Третье обновление вышло давно (осень 2013, вроде), все уже должны были давно обновиться (уже обновляются на WP 8.1, на самом деле), старье на WP 7 баг не затрагивает, поэтому сейчас на баг можно смело забить.

2. Респонсивность на девайсах с 8 виндой

Еще, как выяснилось, ИЕ в 8 винде в метро-режиме совсем не смотрит на мета-тег, зато прекрасно понимают @-ms-viewport. Вот пара поясняющих гифок:

С мета-тегом сайт зумится
С @-ms-viwport сайт адаптируется

В первом случае получаем поведение неоптимизированного сайта — не кайф. Во втором получается мобильная версия, закрепленная у края экрана. Кайф.

Как быть

Все правильные чуваки теперь делают так:

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

и добавляют цсс:

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

@viewport {
    width: device-width;
}

Плюсы:

  • Респонсивность в ИЕ на вин8
  • Родной вьюпорт на винфонах
  • Фьючур пруф! Ноуп.

Минус:

  • Ломается вьюпорт на винфонах без третьего обновления

Ссылки по теме

Опубликовано