Теги для мобильной версии сайта

Теги для мобильной версии сайта

Тег meta viewport позволяет масштабировать веб-страницу для мобильных устройств. Чтобы понять принцип работы данного тега, рассмотрим пример. Создадим HTML-страницу следующего содержания:

Посмотрим, как будет отображаться наша страница на мобильном устройстве:

Как мы видим, страница отобразилась плохо и не масштабировалась под ширину экрана мобильного устройства. Для того, чтобы прочитать текст на странице, нужно увеличивать и приглядываться, постоянно передвигать страницу то влево, то вправо и т.д. Наверняка, вы уже сталкивались с подобным.

Мы уже говорили о создании мобильной версии сайта (читайте статью Как сделать мобильную версию сайта), а теперь рассмотрим конкретную реализацию — с чего начать мобильную верстку. Как вы уже догадались, речь идет о масштабировании, и здесь нам на помощь приходит тег meta name viewport. Работает он следующим образом:

Из синтаксиса тега понятно, что тег указывает браузеру на то, чтобы в качестве ширины области просмотра использовалась ширина экрана устройства (а не значение браузера по умолчанию, которое обычно составляет 980px). Также в этой записи инициализируется масштаб страницы (initial-scale=1.0).

Добавим вышеуказанную запись между тегами в нашем примере и зайдем на страницу снова с мобильного устройства:

Как мы видим, страница прекрасно масштабировалась под экран мобильного устройства. Поэтому тег viewport становится просто незаменимым при мобильной и адаптивной верстке.

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

Обычное использование мета тега viewport

Обычно мета тег viewport используется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах. Вот пример.

Использование мета тега viewport в неадаптивном шаблоне

По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш дизайн может плохо соответствовать данному диапазону. Значение может быть для шаблона слишком большим или маленьким. Ниже приводится два примера. которые используют мета тег viewport для улучшения внешнего вида неадаптивного шаблона на мобильных устройствах.

Пример

Посмотрите на сайт Themify с мобильного устройства.

Левый снимок экрана демонстрирует внешний вид сайта без использования мета тега viewport . Можно заметить, что страница касается обеих сторон экрана. Если добавить мета тег viewport с указанием ширины 1024px, то будет оставаться зазор слева и справа.

Другой пример

Если ваш дизайн слишком узкий, то он тоже будет выглядеть коряво. Допустим, ширина контейнера 700px и он не адаптируется. В таком случае внешний вид будет как ниже приведенном слева снимке экрана — широкая белая полоса слева.

Читайте также:  Как сделать замену текста в ворде

Проблему легко устранить установив ширину окна просмотра 720px. Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 720px.

Общая ошибка

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай — сочетание user-scalable=no или maximum-scale=1 с initial-scale=1 . Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
Перевел: Сергей Фастунов
Урок создан: 10 Октября 2012
Просмотров: 246744
Правила перепечатки

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

На этой странице

Введение

Мобильные браузеры отображают страницы в виртуальном «окне» (viewport, вьюпорт), которое, как правило, шире экрана устройства. Поэтому им не нужно сжимать макет каждой страницы в крошечное окно (что может сломать многие сайты, не оптимизированные под мобильные устройства). Пользователи могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.

В мобильной версии Safari появился "мета тег viewport" (viewport meta tag), который позволяет веб-разработчикам контролировать размер окна просмотра и масштаб страницы. Многие другие мобильные браузеры также поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта. Документация Apple хорошо описывает, как веб-разработчики могут пользоваться этим тегом. Но мы должны были провести расследование, чтобы точно выяснить, как его можно реализовать в Fennec. Например, в документации к Safari сказано, что контент представляет собой «список значений, разделенных запятыми», но существующие браузеры и веб-страницы используют любое сочетание запятых, точек с запятой и пробелов в качестве разделителей.

Узнать больше о вьюпортах в разных мобильных браузерах можно в Рассказе о Двух Viewport’ах на quirksmode.org.

Основы Viewport

Типичный сайт, оптимизированный для мобильных устройств, содержит следующий мета-тег:

Свойство width определяет размер окна просмотра. Он может быть установлен на определенное количество пикселей, скажем, width=600 или на специальное значение device-width , которое означает ширину экрана в пикселях CSS в масштабе 100%. (Есть также соответствующие значения height и device-height , которые могут быть полезны для страниц с элементами, которые изменяют размер или положение на основе высоты окна просмотра).

Читайте также:  Незаконная прослушка статья ук рф

Свойство initial-scale контролирует уровень масштабирования при первой загрузке страницы. Свойства maximum-scale , minimum-scale и user-scalable определяют, как пользователям разрешено увеличивать или уменьшать страницу.

Пиксель это не пиксель

В последние годы разрешение экрана увеличилось до такого размера, что отдельные пиксели трудно отличить человеческим глазом. Например, последние смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920-1080 пикселей (

400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы в меньшем физическом размере, переведя несколько аппаратных пикселей для каждого пикселя CSS. Первоначально это вызывало проблемы удобства использования и удобства чтения на многих веб-сайтах, оптимизированных для сенсорного экрана. Питер-Пол Кох написал об этой проблеме в «Пиксель это не пиксель».

На экранах с высоким разрешением экрана страницы с initial-scale=1 будут эффективно масштабироваться браузерами. Их текст будет плавным и четким, но их растровые изображения, вероятно, не будут использовать полное разрешение экрана. Чтобы получить более четкие изображения на этих экранах, веб-разработчики могут создать изображения — или целые макеты — в более высоком масштабе, чем их конечный размер, а затем масштабировать их с помощью свойств CSS или viewport. Это соответствует спецификации CSS 2.1, которая гласит:

Если плотность пикселей устройства вывода сильно отличается от плотности изображения на типичном дисплее компьютера, пользовательский агент должен масштабировать значения пикселей. Рекомендуется, чтобы блок пикселей ссылался на все количество пикселей устройства, которые наилучшим образом приближаются к опорному пикселю. Рекомендуется, чтобы опорный пиксель представлял собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки.

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

Отношение пикселей по умолчанию зависит от плотности дисплея. На дисплее с плотностью менее 200 точек на дюйм отношение равно 1.0. На дисплеях с плотностью от 200 до 300 точек на дюйм отношение равно 1.5. Для дисплеев с плотностью более 300 точек на дюйм отношение представляет собой целостный пол (плотность / 150 точек на дюйм). Обратите внимание, что коэффициент по умолчанию равен true только тогда, когда масштаб viewport равен 1. В противном случае соотношение между пикселями CSS и пикселями устройства зависит от текущего уровня масштабирования.

Читайте также:  Почему не удаляются фото с айфона

Ширина Viewport и ширина экрана

Сайты могут устанавливать свой viewport на определенный размер. Например, определение « width=320, initial-scale=1 » может использоваться для точного размещения на маленьком дисплее телефона в портретном режиме. Это может вызвать проблемы, когда браузер не отображает страницу большего размера. Чтобы исправить это, браузеры, если необходимо, увеличат ширину окна просмотра, чтобы заполнить экран по заданной шкале. Это особенно полезно для устройств с большим экраном, таких как iPad. (Аллен Пайк Выбор видового экрана для IPad сайтов дает хорошее объяснение для веб-разработчиков.)

Для страниц, задающих начальный или максимальный масштаб, это значит, что свойство width фактически переводит в минимальную ширину viewport. Например, если ваш макет должен иметь ширину не менее 500 пикселей, вы можете использовать следующую разметку. Когда экран шириной более 500 пикселей, браузер будет расширять область просмотра (а не увеличивать), чтобы она соответствовала экрану:

Другими доступными атрибутами являются minimum-scale , maximum-scale , и user-scalable . Эти свойства влияют на начальный масштаб и ширину, а также ограничивают изменения уровня масштабирования.

Не все мобильные браузеры обрабатывают изменения ориентации таким же образом. Например, Mobile Safari часто просто увеличивает масштаб страницы при смене с вертикальной ориентации на горизонтальный, вместо того, чтобы выкладывать страницу так, как если бы она была первоначально загружена в "ландшафт". Если веб-разработчики хотят, чтобы их настройки масштаба оставались неизменными при переключении ориентации на iPhone, они должны добавить значение maximum-scale , чтобы предотвратить это масштабирование, которое иногда имеет нежелательный побочный эффект, который мешает пользователям изменять масштаб:

Общепринятые viewport для мобильных и планшетных устройств

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

Спецификации

Спецификация Статус Комментарий
CSS Device Adaptation
Определение ‘ ‘ в этой спецификации.
Рабочий черновик В ненормативном порядке описывается элемент Viewport META

Существует явный спрос на метатег viewport, поскольку он поддерживается большинством популярных мобильных браузеров и используется тысячами веб-сайтов. Было бы неплохо иметь настоящий стандарт для веб-страниц для управления свойствами viewport. По мере того, как продолжается процесс стандартизации, мы будем писать в Mozilla об его стадиях, чтобы вы были в курсе любых изменений.

Ссылка на основную публикацию
Считается что каждый символ кодируется 16 битами
--> Играть в ЕГЭ-игрушку Мобильный справочник Карточки НАШИ БОТЫ Считая, что каждый символ кодируется 16 битами, оцените информационный объем следующей...
Стиральная машина самсунг горит красный замок
Любая стиральная машина в независимости от марки производителя иногда выходит из строя. Довольно частым признаком неисправности, является мигание индикатора замка....
Стиральная машинка lg не выжимает
Покупка стиральной машинки – знаменательное событие для любой хозяйки. Незаменимая помощница позволяет женщинам экономить личное время, не тратя его на...
Съезд выслушал меня молча вспоминал
февраля 1956 г. вошло не только в отечественную, но и в мировую историю. В этот день на закрытом заседании XX...
Adblock detector