Сайт Романа ПарпалакаБлог20171029

Viewport в Edge

29 октября 2017 года, 00:42

Здесь описывается технология, которая была реализована только в браузерах Opera и IE. Так как они отказались от своих движков, в современных браузерах технология не поддерживается, и была удалена из стандарта. Заметку оставлю для истории.

Для нормального отображения сайтов на узких экранах мобильников верстальщик добавляет в html-код страниц мета-тег viewport:

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

Например, вот скриншот моего сайта:

Если этого не сделать, на странице всё будет слишком мелким, а при увеличении масштаба появляется неудобная горизонтальная прокрутка:

Десять лет назад, во время появления айфона, мелкие элементы и горизонтальная прокрутка были обычной практикой в мобильных браузерах. Иначе сайты разваливались. Тогда никто не заботился о посетителях с мобильников.

Для айфона в Эпле придумали мета-тег viewport, который говорит браузеру: «Я нормально отображаюсь на маленьком экране, выключи свое масштабирование». Сейчас этот мета-тег остается вне рамок стандартов, но поддерживается в большинстве современных браузеров, кроме Edge.

Микрософт избрал свой путь и поддерживает специальное css-правило @-ms-viewport. Это вендорный вариант правила @viewport, стандарт на которое находится в черновиках. Без этого правила сайты отображаются на планшетах с Windows в уменьшенном масштабе (как на втором скриншоте).

Каждый раз, когда вы добавляете мета-тег viewport, добавьте в css соответствующий код:

@viewport {
	width: device-width;
	}

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

Доля пользователей Edge близка к нулю, но такие люди есть :) Так почему бы парой строк кода не сделать им приятно? И к стандартному способу управления размером видимой области ваш сайт будет готов.

Поделиться

Бинбанк всё Ctrl Синхронная прокрутка

Читайте также

IE8 -> ?
Подумал, что если в Microsoft действительно захотели сделать браузер, работающий по стандартам, и они действительно обеспокоены проблемой отображения сайтов с хаками для IE(6), то самое простое решение этой проблемы — назвать новый браузер по-другому.
2008
Рендеринг текста в IE9
Компания Микрософт выпустила последнюю версию своего браузера, IE9, чуть больше года назад. Первый запуск вызвал у меня смешанные чувства.
2012
vw и %
В css есть специальные единицы длины vw и vh, равные сотой доле ширины и высоты окна. К сожалению, на них не влияют полосы прокрутки.
2017

Комментарии

#1. 29 октября 2017 года, 14:32. Nikita Golodenko пишет:
Мобильный Edge? Это тот, что в виндофонах?
#2. 29 октября 2017 года, 22:29. пишет:
Не только. Есть еще планшеты на винде типа моего: https://written.ru/blog/2016/11/27/Acer_As … witch_10_v

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


Формулы на латехе: $$f(x) = x^2-\sqrt{x}$$ превратится в $$f(x) = x^2-\sqrt{x}$$.
Выделение текста: [i]курсивом[/i] или [b]жирным[/b].
Цитату оформляйте так: [q = имя автора]цитата[/q] или [q]еще цитата[/q].
Других команд или HTML-тегов здесь нет.

Записи