Адаптивный веб-дизайн — Viewport
Что такое Viewport?
Окно просмотра видна область пользователя веб-страницы.
Окно просмотра изменяется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера.
Перед тем как планшеты и мобильные телефоны, веб-страницы были рассчитаны только на экранах компьютеров, и это было общим для веб-страниц, чтобы иметь статический дизайн и фиксированный размер.
Потом, когда мы начали серфинг в Интернете с помощью планшетов и мобильных телефонов, фиксированный размер веб-страницы были слишком велики, чтобы уместиться в окне просмотра. Чтобы исправить это, браузеры на этих устройствах уменьшенную все веб-страницы по размеру экрана.
Это не было совершенным !! Но быстро исправить.
Установка вьюпорте
HTML5 ввел метод , чтобы позволить веб — дизайнерам взять под свой контроль над областью просмотра, через тега.
Вы должны включить следующую видовых элемент во всех ваших веб — страниц:
видовой экран элемент дает инструкции браузера о том , как контролировать размеры данной страницы и масштабирование.
w > часть задает ширину страницы , чтобы следить за экраном на ширину устройства (который будет варьироваться в зависимости от устройства).
initial-scale=1.0 часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Ниже приведен пример веб — страницы без окна просмотра мета — тегов и той же веб — странице с окном просмотра мета — тег:
Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки , чтобы увидеть разницу.
Размер контента к иллюминатору
Пользователи используются для прокрутки веб-сайты вертикально на настольных и мобильных устройств — но не горизонтально!
Таким образом, если пользователь вынужден прокручивать по горизонтали, или уменьшить масштаб, чтобы увидеть всю веб-страницу, что приводит к плохой пользовательский опыт.
Некоторые дополнительные правила, чтобы следовать:
1. Не используйте большие элементы фиксированной ширины — Например, если изображение выводится на экран при ширине шире , чем окна просмотра он может вызвать окно просмотра для прокрутки по горизонтали. Не забудьте настроить ссылку на этот материал, чтобы соответствовать в пределах ширины окна просмотра.
2. Не позволяйте содержание полагаться на определенной ширины окна просмотра хорошо визуализации — Поскольку размеры экрана и ширина в CSS пикселей сильно различаются между устройствами, содержание не должно полагаться на определенной ширины окна просмотра хорошо визуализации.
3. С помощью CSS медиазапросы , чтобы применять различные стили для малых и больших экранов — Установка больших абсолютных ширины CSS для элементов страницы, заставит элемент слишком широк для просмотра на меньшем устройстве. Вместо этого следует использовать относительные значения ширины, например, ширина: 100%. Кроме того, будьте осторожны с использованием больших абсолютных значений позиционирования. Это может привести к тому элементу выходить за пределы окна просмотра на небольших устройствах.
Использование мета тега 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
Просмотров: 242365
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design) опубликовал Радик Алиев категория HTML, CSS, jQuery
просмотры 52 338
Я уверен, что многие используют мета-тег Viewport для масштабирования дизайна, но знаете ли вы, что этот тег также может быть очень полезен для мобильных устройств? Если у вас нет времени, чтобы преобразовать ваш проект, тем не менее, вам следует прочитать эту статью о том, как использовать тег Viewport для улучшения внешнего вида вашего проекта на мобильных устройствах.
Главное использование тега Viewport
Viewport мета-тег, как правило, используется для масштабирования дизайна, чтобы установить ширину и высоту окна на мобильных устройствах. Ниже приведен пример тега Viewport.
Использование тега Viewport для сайтов, не рассчитанных под мобильные устройства.
Как вы знаете, по умолчанию ширину окна просмотра на iPhone является 980px. Но ваш дизайн может не поместиться в этом диапазоне. Он может быть шире или уже. Ниже приведены два примера, где Вы можете использовать эти теги для улучшения отображения вашего сайта на мобильных устройствах.
Взгляните на сайт Themify на iPhone.
На скриншоте слева показывается, как сайт будет выглядеть без тега. Как вы можете видеть, страница касается обеих сторон. Веб-мастер добавил Viewport тег, чтобы задать ширину окна 1024px, поэтому он оставляет некоторый запас пространства на левой и правой сторонах.
Если ваш проект является слишком узким, это может также вызвать проблемы. Допустим, ширина контейнера вашего дизайна 700px, и это не правильно, это будет выглядеть как на скриншоте слева, где есть большое пустое пространство справа.
Вы можете просто исправить это, установив ширину окна в 720px. Ширина вашего дизайна не меняется, но iPhone будет масштабировать, чтобы поместиться в 720px.
Распространенная ошибка
Распространенной ошибкой является то, что люди часто добавляют initial — scale = 1 на не отвечающий размерам дизайн. Это делает страницу в масштабе 100% без масштабирования. Если ваш проект не помещается на экран, пользователям придется уменьшить масштаб, чтобы увидеть полную страницу. Еще хуже, когда объединяют user — scalable = no или maximum — scale = 1 с initial — scale = 1 . Это будет отключать возможность масштабирования. Пользователи не имеют возможности уменьшить размер страницы, чтобы увидеть ее.
Responsive Web Design — The Viewport
Что такое видовой экран?
Видовой экран — это видимая область пользователя веб-страницы.
Окно просмотра зависит от устройства и будет меньше на мобильном телефоне, чем на экране компьютера.
Перед планшеты и мобильные телефоны, веб-страницы были разработаны только для компьютерных экранов, и это было общим для веб-страницы имеют статический дизайн и фиксированный размер.
Затем, когда мы начали серфинг в Интернете с помощью таблеток и мобильных телефонов, фиксированный размер веб-страниц были слишком велики, чтобы соответствовать видового экрана. Чтобы исправить это, браузеры на этих устройствах масштабируется вниз всю веб-страницу, чтобы соответствовать экрану.
Это не было идеальным!! Но быстро исправить.
Настройка видового экрана
HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра через тег .
На всех веб-страницах следует включить следующий элемент видового экрана:
Элемент видового экрана предоставляет обозревателю инструкции по управлению размерами страницы и масштабированию.
w >часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет меняться в зависимости от устройства).
initial-scale=1.0 часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с мета-тегом видового экрана:
Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Размер содержимого для видового экрана
Пользователи используются для прокрутки веб-сайтов по вертикали на настольных и мобильных устройствах-но не горизонтально!
Поэтому, если пользователь вынужден прокручивать горизонтально или уменьшать масштаб, чтобы увидеть всю веб-страницу, это приводит к неудовлетворительному пользовательскому интерфейсу.
Некоторые дополнительные правила, которые следует соблюдать:
1. не используйте большие фиксированные элементы ширины — например, если изображение отображается на ширине шире видового экрана, это может привести к тому, что видовой экран будет прокручиваться горизонтально. Не забудьте настроить это содержимое так, чтобы оно соответствовало ширине видового экрана.
2. не допустить, чтобы содержимое полагаться на конкретную ширину видового экрана для визуализации хорошо — так как размеры экрана и ширина в пикселях CSS сильно различаются между устройствами, содержимое не должно полагаться на конкретную ширину видового экрана для визуализации скважины.
3. Использование CSS Media запросов для применения различных стилей для малых и больших экранов — Установка больших абсолютных ширины CSS для элементов страницы приведет к тому, что элемент будет слишком широк для видового экрана на устройстве меньшего размера. Вместо этого следует использовать значения относительной ширины, например ширину: 100%. Кроме того, будьте внимательны при использовании больших абсолютных значений позиционирования. Это может привести к тому, что элемент окажется вне видового экрана на небольших устройствах.
Responsive Websites: Setting the CSS Viewport Meta Tag
TL;DR — CSS viewport is the zone in a browser window that is visible at once without scrolling. Setting up the CSS viewport tag is the most effective way to improve how web pages look on smaller screens.
The concept of the viewport
The CSS viewport refers to the part of the website, which is visible in the browser window. Therefore, the viewport is usually not the same size as the actual page. Mobile phones and other devices with smaller screens display pages in a virtual window or viewport.
The main issue is that narrower screens make the virtual viewport shrink to display all areas of a web page. Therefore, some websites do not look good on mobile devices.
Manipulating the viewport
You might assume that setting media queries is enough to fix this issue. However, they might not help if the virtual viewport does not match the specified breakpoints.
Therefore, you should consider setting the meta viewport tag for changing the size and scaling viewports.
- w > part of the tag sets the width of the page to respond to the width of the screen.
- initial-scale=1.0 part of the tag sets the initial zoom level of the page.
This example uses the viewport tag:
These settings tell the browsers to display a website at the width of the screen of the device used. Therefore, if the screen width is 320px, the browser window will be the same.
Note: if your website is not created to be responsive, you should not use the viewport tag since it might create issues.
The CSS viewport tag accepts the following properties:
Property | Description |
---|---|
height | Sets the height of the virtual device viewport. |
width | Sets the width of the virtual device viewport. |
initial-scale | Sets the zoom level for when the page is first opened. |
minimum-scale | Sets the minimum zoom level that the user can zoom. |
maximum-scale | Sets the maximum- zoom level that the user can zoom. |
user-scalable | Sets a flag that lets the device to zoom in and out. |
Атрибут | Результат |
---|---|
min-width | Правило применяется к браузеру, ширина которого больше значения, указанного в запросе. |
max-width | Правило применяется к браузеру, ширина которого меньше значения, указанного в запросе. |
min-height | Правило применяется к браузеру, высота которого больше значения, указанного в запросе. |
max-height | Правило применяется к браузеру, высота которого меньше значения, указанного в запросе. |
orientation=portrait | Правило применяется к браузеру, высота которого не меньше его ширины. |
orientation=landscape | Правило применяется к браузеру, ширина которого больше высоты. |
- При ширине браузера от 0 пикс. до 640 пикс. применяется max-640px.css.
- При ширине браузера от 500 пикс. до 600 пикс. применяются стили из @media.
- При ширине браузера от 640 пикс. и выше применяется min-640px.css.
- Если в браузере ширина больше высоты, применяется landscape.css.
- Если в браузере высота больше ширины, применяется portrait.css.
Примечание к min-device-width
Также возможно создание запросов на основании *-device-width, хотя делать это настоятельно не рекомендуется.
Разница небольшая, но очень важная: min-width исходит из размера окна браузера, а min-device-width — из размера экрана устройства. К сожалению, некоторые браузеры (включая устаревшую версию браузера для Android) не всегда правильно определяют ширину области просмотра и вместо нее могут сообщить размер экрана в пикселях устройства.
К тому же, использование *-device-width может помешать контенту подстроиться под экран обычного компьютера или другого устройства, на котором можно изменить размер окна. Причина в том, что этот запрос основан на размере конкретного устройства, а не окна браузера.
Использование относительных единиц
Основной принцип отзывчивого веб-дизайна (и главное отличие от макетов с фиксированной шириной) — подвижность и пропорциональность. Использование относительных размеров помогает упростить макет и предотвратить случайное создание компонентов, не вмещающихся в область просмотра.
Например, установка параметра width равным 100% для блока div верхнего уровня приведет к тому, что он будет заполнять всю ширину области просмотра и никогда не будет слишком мал или велик для нее. Блок div в любом случае будет соответствовать экрану, будь то iPhone (320 пикс.), Blackberry Z10 (342 пикс.) или Nexus 5 (360 пикс.).
Кроме того, использование относительных единиц позволяет браузерам отображать контент, исходя из пользовательского масштаба. Это значит, что горизонтальная панель прокрутки на странице не понадобится.
Not recommended — fixed width
Recommended — responsive width
Выбор контрольных точек
Будьте осторожны при определении контрольных точек на основе классов устройств. Если при установке этих точек вы будете ориентироваться на все доступные устройства, бренды или операционные системы, техническое обслуживание сайта станет практически невозможным. Лучше, если контент будет сам определять, как макет должен подстраиваться под контейнер.
- Создавайте контрольные точки на основе контента, а не для отдельных устройств, продуктов или брендов.
- Сначала разработайте дизайн для самого маленького мобильного устройства, а затем переходите к версиям для больших экранов.
- Ограничьте длину строк 70-80 символами.
Выбор главных контрольных точек: от меньшего к большему
Сначала разработайте дизайн контента для маленьких экранов, а затем увеличивайте его, пока не возникнет необходимость в контрольной точке. Так вы оптимизируете контрольные точки на основе контента и используете их минимальное количество.
В качестве примера рассмотрим уже знакомый вам прогноз погоды. Сначала сделаем так, чтобы прогноз хорошо смотрелся на небольшом экране.
Затем увеличим размер окна браузера, пока между элементами не появится слишком много пустого пространства. Теперь прогноз погоды выглядит не так красиво. Вы можете выбрать любое значение, но 600 пикселей — это слишком много.
Чтобы сделать 600 пикселей контрольной точкой, нужно создать две таблицы стилей: одну для меньших значений, другую для больших.
В конце проведите рефакторинг CSS. В этом примере мы поместили общие стили (шрифты, значки, цвета и базовое позиционирование) в weather.css. Затем мы включили макет для маленьких экранов в weather-small.css, а для больших — в weather-large.css.
Выбор второстепенных контрольных точек (если необходимо)
Отметив главными контрольными точками крупные изменения макета, внесите второстепенные корректировки. Например, между главными контрольными точками можно установить отступы для элемента или увеличить размер шрифта, чтобы он смотрелся в макете более естественно.
Начнем с оптимизации макета для небольших экранов. В данном случае мы увеличим шрифт для ширины области просмотра, превышающей 360 пикселей. Теперь, когда места достаточно, мы можем расположить минимальную температуру на одной линии с максимальной, а не под ней. Также немного увеличим значки погодных явлений.
Этим же способом можно ограничить размер панели прогноза погоды для больших экранов, чтобы она не занимала всю доступную ширину.
Оптимизация текста для чтения
Согласно распространенной теории, самой удобной для чтения является колонка с длиной строки около 70-80 знаков (8-10 слов). Поэтому для всех текстовых блоков, ширина которых превышает 10 слов, следует установить контрольную точку.
Рассмотрим подробнее приведенный выше пример записи в блоге. На маленьком экране отлично помещаются строки длиной в 10 слов шрифтом Roboto с размером 1em, но для экранов большего размера необходимо установить контрольную точку. В этом случае для окна просмотра браузера размером больше 575 пикселей оптимальная ширина контента равна 550 пикселям.
Никогда не скрывайте контент полностью
Внимательно выбирайте информацию, которая будет показана или скрыта в зависимости от размера экрана. Не убирайте контент только потому, что не можете разместить его на экране. Потребности пользователей не зависят от его размера. Например, если вы уберете из прогноза погоды информацию о содержании пыльцы в воздухе, это может стать серьезной проблемой для аллергиков, решающих, стоит ли сегодня выходить из дома.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
CSS вьюпорт единицы измерения: быстрый старт
Дата публикации: 2020-04-04
От автора: с первого показа вьюпорт единиц в CSS прошло несколько лет. Это реально адаптивные единицы измерения длины, их значение меняется под размеры окна браузера. Если вы слышали о них, но никогда не вдавались в детали, эта статья для вас.
Единицы измерения и их значение
В CSS есть 4 типа вьюпорт единиц: vh, vw, vmin и vmax.
Viewport height (vh) – основаны на высоте вьюпорта. Значение 1vh равно 1% высоты вьюпорта.
Viewport width (vw) – основаны на ширине вьюпорта. Значение 1vw равно 1% ширины вьюпорта.
Viewport minimum (vmin) – основаны на минимальной стороне вьюпорта. Если высота вьюпорта меньше ширины, значение 1vmin будет равно 1% от высоты. Точно так же если ширина меньше высоты, то 1vmin будет равен 1% от ширины вьюпорта.
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
Viewport maximum (vmax) – основаны на большой стороне вьюпорта. Если высота вьюпорта больше ширины, то значение 1vmax будет равно 1% от высоты вьюпорта. Если ширина вьюпорта больше высоты, то 1vmax будет равен 1% от ширины.
Давайте посмотрим, какие значения мы получим в разных ситуациях:
Если вьюпорт 1200px в ширину и 1000px в высоту, то значение 10vw будет равно 120px, а 10vh – 100px. Ширина вьюпорта больше высоты, поэтому 10vmax будет равно 120px, а 10vmin – 100px.
Если повернуть устройство, чтобы ширина стала 1000px, а высота 1200px, то 10vh будет равно 120px, а 10vw превратится в 100px. Интересно, но 10vmax так и останется 120px, потому что теперь значение определяется по высоте вьюпорта. Значение 10vmin также останется 100px.
Если сузить окно браузера до 1000px в ширину и 800px в высоту, то 10vh будет 80px, а 10vw будет 100px. Точно так же значение 10vmax станет 100px, и 10vmin – 80px.
На данный момент вьюпорт единицы для вас могут несильно отличаться от процентов, однако разница велика. В случае с процентами ширина и высота дочерних элементов зависят от родительского блока. Пример:
В демо видно, как ширина первого дочернего элемента занимает 80% ширины от родителя. У второго дочернего элемента ширина равна 80vw, что делает его шире родителя.
Применение вьюпорт единиц измерения
Эти единицы основаны на размерах вьюпорта, поэтому их очень удобно использовать в ситуациях, когда ширина, высота или размеры элементов должны изменяться в зависимости от размеров вьюпорта.
Полноэкранные фоновые изображения и секции
В сети довольно часто можно встретить фоновые изображения на элементах, которые занимают весь экран. Точно так же можно сделать в дизайне сайта, чтобы отдельная секция о товаре или услуге занимала весь экран. В таких случаях можно задать ширину элементов в 100%, а высоту в 100vh.
Разберем следующий пример HTML:
CSS ниже растянет секцию под фоновое изображение на всю ширину:
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
Идеально подходящие заголовки
Вы могли слышать или даже использовать jQuery плагин FitText . С помощью этого плагина можно масштабировать заголовки таким образом, чтобы они занимали всю ширину родительского элемента. Как я сказала раньше, значение вьюпорт единиц напрямую зависит от размеров вьюпорта. То есть если указывать font-size заголовков во вьюпорт единицах, то они идеально будут подходить под каждый экран. Если изменится ширина вьюпорта, браузер автоматически изменит заголовок. Нужно лишь определить правильное первоначальное значение для font-size.
Главная проблема с font-size и вьюпорт единицами заключается в том, что размер текста будет сильно варьироваться в зависимости от вьюпорта. Например, font-size со значением 8vw сделает заголовок размером в 96px для вьюпорта с шириной 1200px, 33px для ширины в 400px и 154px для ширины вьюпорта в 1920px. Шрифт может быть, как слишком большим, так и слишком маленьким для удобного чтения. Более подробно прочитать о правильной установке размеров текста с помощью единиц измерения и функции calc() можно в замечательной статье о типографике на вьюпорт единицах .
Легкое центрирование элементов
Вьюпорт единицы могут очень сильно помочь, когда необходимо поместить элемент точно в цент экрана пользователя. Если высота элемента известна, то нужно всего лишь задать верхнее и нижнее значение свойства margin в [(100 — height)/2]vh.
Мета-тег viewport
По умолчанию, сайт в мобильных устройствах масштабируется по размеру сайта. Чтобы открывать под исходное разрешение экрана, используется мета тег viewport .
Свойство width указывает, под каким размером отображать сайт. Если указать w >, то мобильное устройство отобразит сайт в ширину 600 пикселей. Значение device-width означает, что надо отображать сайт под размер текущего мобильного устройства.
В свойстве initial-scale указывается масштаб страницы. Значение 1 означает масштаб 100%.
Первый браузер, который стал использовать мета тег viewport , стал Safari.
Запретить масштабирование в мобильных устройствах
Запретить масштабирование в мобильных устройствах можно через два свойства:
- maximum-scale — максимальный размер масштабирования;
- user-scalable — разрешать масштабирование.