Не пропусти
Главная 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 версии – address. В него можно включить информацию об авторе и ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Promo-soft AddStudio

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

Promo-soft Add2Board

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

Promo-soft AddSite

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

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

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

Key collector

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

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

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

Рейтинг@Mail.ru