Не пропусти
Главная 20 Интернет 20 HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design)

HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design)

HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design)

Я уверен, что многие используют мета-тег Viewport для масштабирования дизайна, но знаете ли вы, что этот тег также может быть очень полезен для мобильных устройств? Если у вас нет времени, чтобы преобразовать ваш проект, тем не менее, вам следует прочитать эту статью о том, как использовать тег Viewport для улучшения внешнего вида вашего проекта на мобильных устройствах.

Главное использование тега Viewport

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

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

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

Пример

Взгляните на сайт Themify на iPhone.

HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design)

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

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

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

HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design)

Вы можете просто исправить это, установив ширину окна в 720px. Ширина вашего дизайна не меняется, но iPhone будет масштабировать, чтобы поместиться в 720px.

 

Распространенная ошибка

Распространенной ошибкой является то, что люди часто добавляют

initial-scale=1

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

user-scalable=no

или

maximum-scale=1

с

initial-scale=1

. Это будет отключать возможность масштабирования. Пользователи не имеют возможности уменьшить размер страницы, чтобы увидеть ее.

Помните: если ваш проект не отвечает размерам окна и не сбрасывает

initial-scale

, то отключите масштабирование!

HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design)

О admin

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

x

Check Also

Что такое html тег address и как он работает?

Всем хорошего и бодрого утра! На линии обучения азам сайтостроительства Макс Метелев и сегодня мы рассмотрим такой интересный тег, который применяется в html 5 версии ...

Как правильно подключить шрифты в CSS на сайте?

Всем привет дорогие друзья! Наконец то к сайту вернулась посещаемость, а то с праздниками народ вообще подзабил на полезные статьи. Ну это понятно, кто в ...

Как выбрать бесплатный конструктор сайта?

Всем привет дорогие друзья и читатели моего блога! Средства, облегчающие процесс создания веб-сайтов создаются постоянно, с тех пор как к Интернету получил доступ обычный обыватель. ...

Идея для бизнеса: разработка иконок для сайта

Основной принцип. Когда человек первый раз попадает на веб сайт, то первое на что он обращает свое внимание – это иконки для заголовков. Именно по ...

Как скруглить углы и края в фотошопе

Рад снова и снова видеть вас мои дорогие читатели! Сегодня очередной урок по фотошопу и расскажу сегодня как скруглить края (углы) у фото или картинки ...

Как скруглить края или углы у картинки онлайн

Добрый день друзья и подруги! Рад вас всех видеть в обновленном составе. Почему в обновленном? Да потому как активность ваша на блоге растет с каждым ...

Оптимизация картинок на сайте с помощью полезных сервисов и программ

Всем привет друзья! В этой статье я расскажу про важность оптимизации изображений и картинок на вашем сайте, без разницы используете ли вы CMS WordPress, Joomla ...

Как подобрать цвета для своего сайта? Обзор 4 сервисов

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

Разработка качественного и продающего дизайна сайта

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

Скликивание рекламы

Скликивание рекламы Всем привет! Данная статья будет посвящена такому вопросу, как скликивание рекламы. Частично суть проблемы была описана в данном посте, но чаще всего под ...

Promo-soft AddStudio

Promo-soft AddStudio Всем привет! На данном блоге давно не было обзоров SEO софта и поэтому сейчас постараюсь исправиться. На этот раз виновником торжества; стала программа ...

Promo-soft Add2Board

Promo-soft Add2Board Всем привет! Я продолжаю обзор SEO софта от компании Promo-soft и на этот раз речь пойдет про Add2Board. Основное предназначение программы  автоматическая рассылка на ...

Promo-soft AddSite

Promo-soft AddSite Всем привет! Как вы уже, наверное, заметили я делаю обзор всей линейки программ от Promo-soft  и сегодня на очереди AddSite . До этого ...

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан Всем привет! Собственно новость не первой свежести, но до этого многие полагали что это фейк и что взломанного ...

Key collector

key collector Всем привет! В этой статье будет дан небольшой обзор программы, без которой не представляют себе жизнь многие оптимизаторы key collector ( кей коллектор). ...

Хитрый способ сбора качественной пробиваемой базы для XRUMER

Хитрый способ сбора качественной пробиваемой базы для XRUMER Всем привет! Ни для кого не секрет, что каким бы замечательным не был софт для массовой регистрации/рассылки, ...