Утром доделаю

Про @viewport

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

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

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

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

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

Оказалось, традиционный мета-тег <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. Вот пара поясняющих гифок:

Демонстрация того, как винда не воспринимает мета-тег
С мета-тегом сайт зумится
Демонстрация того, как винда радуется наличию @viewport
С @-ms-viwport сайт адаптируется

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

Как быть

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

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

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

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

@viewport {
    width: device-width;
}

Плюсы:

Минус:

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

Опубликовано в рубрике «Чиним интернет»