Нет сомнения, что вы используете мета тег viewport при работе с адаптивными шаблонами. Но знаете ли вы, что мета тег viewport может быть полезен и для неадаптивных шаблонов? Если у вас нет времени для конвертации шаблона своего проекта в адаптивный, то следует прочесть материалы данного урока, чтобы использовать мета тег viewport для улучшения вида вашего дизайна на мобильных устройствах.
Обычное использование мета тега viewport
Обычно мета тег viewport используется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах. Вот пример.
Использование мета тега viewport в неадаптивном шаблоне
По умолчанию ширина окна просмотра на iPhone устанавливается равной 980px. Но ваш дизайн может плохо соответствовать данному диапазону. Значение может быть для шаблона слишком большим или маленьким. Ниже приводится два примера. которые используют мета тег viewport для улучшения внешнего вида неадптивного шаблона на мобильных устройствах.
Значение слова тег viewport. Что такое тег viewport.
Пример
Посмотрите на сайт Themify с мобильного устройства. Левый снимок экрана демонстрирует внешний вид сайта без использования мета тега viewport . Можно заметить, что страница касается обеих сторон экрана. Если добавить мета тег viewport с указанием ширины 1024px, то будет оставаться зазор слева и справа.
Другой пример
Если ваш дизайн слишком узкий, то он тоже будет выглядеть коряво. Допустим, ширина контейнера 700px и он не адаптируется. В таком случае внешний вид будет как ниже приведенном слева снимке экрана — широкая белая полоса слева. Проблему легко устранить установив ширину окна просмотра 720px. Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 720px.
Общая ошибка
Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу.
Самый плохой случай — сочетание user-scalable=no или maximum-scale=1 с initial-scale=1 . Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/VJBXTPHv6uw/lessons.php
Статьи по теме
Тренды в веб-дизайне в 2023 году
В этой статье мы хотим снова поговорить о трендах 2023 года, но теперь в веб-дизайне. Первый тренд — комбо графики и типографики Тренд на со.
Как подключиться к серверу по VNC
Начинающие разработчики часто сталкиваются со сложностью в администрировании Unix-систем. Привычный способ подключения через SSH-туннел�.
What Does Viewport Mean in Stats for Nerds on YouTube
Как я могу перенаправить и переписать свои URL-адреса с помощью файла .htaccess?
Что нужно изменить в приведенных ниже примерах? Приведенные ниже примеры можно ввести в ваш файл .htaccess точно так, как показано на рисунк�.
Яндекс выложил в опенсорс исходный код и документацию фреймворка userver
Яндекс опубликовал исходный код и документацию фреймворка userver. Это первый открытый набор инструментов, который позволяет создавать вы�.
Как выявить медленные SQL запросы?
Это случалось с каждым из нас при разработке веб-сайтов или приложений, использующих MySQL в качестве базы данных. Производительность внез.
Читали мое письмо или нет? Как проверить с помощью php — Записки программиста
Сегодня столкнулся с интересной проблемой – нужно было сделать почтовую рассылку, и потом определить на каких почтовых ящиках прочитал.
Импорт большого дампа БД в OpenServer через консоль
Практически каждый разработчик пользуется локальным веб-сервером при разработке или тестировании своих проектов, в котором уже имеютс�.
Что такое редирект
Редирект (от англ. redirect — «перенаправление») — это автоматическая переадресация посетителя с одной страницы на другую. То есть пользова.
WordPress. Как создать нового администратора с помощью базы данных
Из этого туториала вы узнаете, как создать нового администратора с помощью базы данных. WordPress. Как создать нового администратора с помощ.
PHP и регулярные выражения: азы для новичков
Всем привет! Всех с наступившим [20]<2,>0 годом. Сегодня я хочу затронуть тему, которая иногда является темой для шуток от «Да зачем тебе все �.
Как систематизировать товары в интернет-магазине: категории, типы и характеристики
Сколько бы ни было товаров в вашем интернет-магазине, вам нужно описывать каждый из них: заполнять характеристики и распределять товары .
Обновление PHP на Denwer. Обновление Denwer (Apache 2.2, PHP 5.6, MySQL 3.5) + Обновление Denwer (Apache 2.4.23 (со всеми модулями), PHP 7.0.10 (со всеми расширениями + xdebug), MySQL 5.7.15) + Обновление Denwer (Apache 2.4.23 (со всеми модулями), PHP 7.1
Все, кто пользуется Denwer (ДНВР), проще говоря джентльменским набором веб-разработчика, знают, что обновления пакета происходят не так уж и .
Решение проблемы – an error occurred while processing this directive
Один из моих клиентов обратился ко мне с такой просьбой. У них есть сайт и на нем в некоторых местах, причем не со всех устройств появляет�.
Редизайн при сохранении позиций: рекомендации по SEO
Достаточно распространённым является мнение, что редизайн интернет-ресурса может крайне негативно сказаться на его производительност�.
Уязвимость загрузки файлов в компоненте AdsManager в папку plupload
В последнее время попадаются сайты с одной и той же уязвимостью в AdsManager, в этой статье я расскажу, как найти и закрыть уязвимость на сайт�.
Использование мета тега viewport в неадаптивных шаблонах | 2012-10-17 00:26:32 | 2012-10-17 00:42:47 | Администратор | Статьи Web-мастеру | | Нет сомнения, что вы используете мета тег viewport при работе с адаптивными шаблонами. Но знаете ли вы, что мета тег viewport может быть полезен и для неадаптивных шаблонов? Если у вас нет времени | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Продающие сайты «под ключ»!
Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее.
Интернет-магазины и каталоги «под ключ»!
Эффективные и удобные инструменты торговли (электронной торговли) «под ключ». Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее.
Комплексный интернет-маркетинг и продвижение сайтов
Максимальную эффективность дает не какой-то конкретный метод, а их комбинация. Комбинация таких методов и называется комплексным интернет-маркетингом. Всего от 8000 рублей в месяц
Подробнее.
Скидка 50% на разработку логотипа
Профессиональный логотип поможет вашему бизнесу привлечь новых покупателей и усилить их приверженность к торговой марке, а также повысить доверие, так как он работает на вас 24 часа в сутки. В заключение к этому можно сказать, что лoготип занимает центральное место в индивидуальности компании.
Подробнее.
Реклама в Yandex и Google
Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее.
Social media marketing (SMM) — продвижение в социальных медиа
Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее.
Приглашаем к сотрудничеству рекламные агентства и веб-студии!
Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее.
Ускоренная разработка любого сайта от 5 дней!
Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта «под ключ» за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее.
Ждем новых друзей!
Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее.
Приведи друга и получи скидку!
Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее.
Новые статьи и публикации
- 2023-09-01 » Организация продаж на Авито и ЮЛА
- 2023-08-30 » Услуги дизайнера на заказ
- 2023-08-29 » Интеграция с 1С
- 2023-08-29 » Доработка интернет-магазина
- 2023-08-10 » Как продвигать сайты-аффилиаты в поиске
- 2023-08-10 » SEO-продвижение сайтов медицинской тематики: лучшие стратегии и практики
- 2023-05-19 » Как повысить конверсию в интернет-магазине: 17 способов
- 2023-05-19 » Тренды в веб-дизайне в 2023 году
- 2023-05-19 » Как подключиться к серверу по VNC
- 2023-02-27 » Грамотная структура страницы сайта — основные элементы и советы
- 2023-02-07 » Маркетинговые исследования
- 2023-02-01 » Вывод сайта из-под фильтров
- 2023-02-01 » Проработка воронки продаж в Интернете
- 2023-01-26 » Установка и настройка Call tracking и Email tracking
- 2022-11-09 » 12 работающих формул продающих текстов
- 2022-11-09 » Дизайн сайта как SEO фактор ранжирования в 2022. Неочевидные нюансы в дизайне
- 2022-09-06 » Яндекс выложил в опенсорс фреймворк для ускорения разработки мобильных приложений
- 2022-08-18 » Как я могу перенаправить и переписать свои URL-адреса с помощью файла .htaccess?
- 2022-08-01 » Яндекс выложил в опенсорс исходный код и документацию фреймворка userver
- 2022-07-29 » Как выявить медленные SQL запросы?
- 2022-07-29 » Читали мое письмо или нет? Как проверить с помощью php — Записки программиста
- 2022-07-26 » Я потратил 30 дней на анализ лучших кнопок призыва к действию, которые смог найти в Интернете
- 2022-06-29 » ТОП-15 актуальных трендов интернет-маркетинга для России: эксперт рассказал о тенденциях рынка в 2022 году
- 2022-06-21 » Почему «99 франков» — это не лучшая ценовая стратегия, и как теперь «рисовать» привлекательные цены
- 2022-06-16 » Пушкинская карта и Культура.РФ на Вашем сайте. Подключим к действующему сайту и(или) сделаем новый!
- 2022-05-18 » Анализ рынка интернет-маркетинга в РФ от Яндекс Дзен
- 2022-05-18 » Итоги развития рекламного рынка РФ за 2021 год по версии АКАР
- 2022-05-18 » Потребление мобильного трафика в Рунете достигло рекордных значений
- 2022-05-17 » Yappy, TenChat и другие. Обзор новых русских соцсетей и их возможностей
- 2022-05-17 » Реклама малого бизнеса. Разбор доступных каналов, инструментов аналитики и терминов
Темы
- Реклама в интернете
- Web сайты
- Оптимизация (SEO)
- Продвижение сайтов
- Поисковые системы
- Конкуренция сайтов
- Маркетинг
- Интернет-маркетинг
- Бизнес статьи
- Инвестиции и финансы
- Психология
- Электронные платежные системы
- Электронная коммерция
- Справочник по web
- Юзабилити
- Системы управления сайтом
- Web-мастеру
- Программирование
- Веб-дизайн
- Нормативные документы
- Базы данных
- Языки разметки
- Апдейты тИЦ и PR
- Инструментарий
- Apache
- Интернет безопасность
- Компьютерно-программистский юмор
- Технологии и новости мира IT
- ДВ СМИ
- Образование, педагогика, обучение
- Forbes russia
- Связь и телекоммуникации
- Блоги
Задайте вопрос профи
Наши эксперты ответят на любой вопрос
Сейчас только тот является менеджером, кто заставляет знания работать.
Питер Друкер
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и зарубежью. Продвижение и реклама. Веб-дизайн. Приложения. Сопровождение. Модернизация. Интеграции.
Консалтинг. Продвижение и реклама. Комплексный Интернет-маркетинг.
Заказать услуги со скидкой Бесплатная консультация
Оставьте заявку удобным вам способом!
Оставить заявку
HTML: Viewport
Для корректного отображения разметки HTML браузеры создают специальную копию разметки и вставляют её в «виртуальное окно», которое называется viewport. Зачастую данное окно шире, чем экран текущего устройства. Это сделано для того, чтобы все элементы поместились так, как задумывалось. Данный эффект можно увидеть, если зайти на неадаптированную HTML-страницу с мобильного устройства. В таком случае появляется горизонтальная полоса прокрутки.
Впервые данный метатег появился в браузерах от компании Apple «Safari». До появления мобильных устройств браузер Safari по умолчанию считал, что все страницы в интернете имеют ширину в 980 пикселей, из-за чего на первых версиях iPod и iPhone сайты отображались не полностью, а только первые 320 пикселей по ширине.
Сейчас такая проблема решается указанием ширины сайта для устройств. Наиболее часто используют значение device-width у параметра width , которое устанавливает ширину страницы, равную ширине экрана устройства.
Этим значением браузеру сообщается, что ширина страницы равна ширине устройства, с которого эта страница просматривается.
Сейчас вам может показаться это сложным, но, с изучением CSS, вы полностью поймёте смысл указания viewport . Сейчас важно знать про такой метатег и его основные варианты применения
Стоит обратить внимание, что параметры задаются внутри атрибута content , свойства в котором разделяются запятой.
Основные параметры метатега viewport
- width — ширина сайта. Указывается в пикселях. Возможно использование значения device-width для установки ширины страницы равной ширине устройства.
- height — высота сайта. Указывается в пикселях. Возможно использование значения device-height для установки высоты страницы равной высоте устройства.
- initial-scale — начальный коэффициент масштабирования. Может принимать значение от 0.1 до 10.0. Значение единица масштабирует страницу по умолчанию.
- user-scalable — указывает, может ли пользователь масштабировать страницу, то есть приближать или отдалять её. Принимает значение yes и no
Укажем viewport со следующими характеристиками:
- Ширина: 980px
- Масштаб: 1
- Запрет управления масштабированием. То есть запретить приближать или отдалять контент с помощью жестов или «горячих клавиш»
Для этого создаём метатег и, вначале указываем ширину. Это делается с помощью значения width :
Задать изначальный масштаб поможет значение initial-scale со значением 1.0 . Оно означает, что страница выведется без какого-либо искажения, с теми размерами шрифтов и других элементов, которые были установлены разработчиками.
Последнее — запрет на масштабирование. Для этого добавим user-scalable со значением no
Базовое использование метатега viewport
Задание
Добавьте метатег viewport с шириной экрана 1024, без возможности масштабирования со стороны пользователя
Упражнение не проходит проверку — что делать?
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя
Это нормально , в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Источник: code-basics.com