В этом блоге объясняется, как использовать метатег области просмотра для адаптивного веб-дизайна в HTML:
Что такое метатег области просмотра?
“ окно просмотра ” — самый важный тег для создания адаптивного дизайна, контролирующий, как контент будет отображаться на разных размерах экрана. Этот тег помещается внутри « <голова> ” и содержит два атрибута. Первый – это « имя », который говорит о назначении этого тега, а второй — « содержание », который содержит данные, связанные со значением, указанным в « имя атрибут.
Различные атрибуты метатега области просмотра
Метатег области просмотра имеет следующие атрибуты, которые можно поместить в качестве значения для « содержание атрибут:
атрибут 'ширина'
“ ширина Атрибут определяет видимую область веб-страницы для контента по вертикали. Его метатег выглядит так:
< мета имя '=' 'окно просмотра' содержание '=' 'ширина = ширина устройства' >
атрибут 'высота'
“ высота Атрибут «задает вертикальную длину веб-страницы, чтобы высота области просмотра соответствовала высоте экрана. Его метатег выглядит так:
< мета имя '=' 'окно просмотра' содержание '=' 'высота=400' >
Атрибут «Начальный масштаб»
“ Исходный масштаб ” обеспечивает отображение веб-страницы с соответствующим уровнем масштабирования при первой загрузке. Например, посетите приведенный ниже код:
< мета имя '=' 'окно просмотра' содержание '=' 'ширина = ширина устройства, начальный масштаб = 1,0' >атрибут «максимальный масштаб»
“ максимальный масштаб ” указывает максимальный уровень масштабирования для веб-страницы, чтобы предотвратить проблемы с макетом:
< мета имя '=' 'окно просмотра' содержание '=' 'ширина = ширина устройства, максимальный масштаб = 1,0' >
атрибут «минимальный масштаб»
“ минимальный масштаб ” используется, чтобы запретить пользователю слишком сильно уменьшать масштаб, указав минимальный уровень масштабирования:
< мета имя '=' 'окно просмотра' содержание '=' 'ширина = ширина устройства, минимальный масштаб = 0,5' >атрибут «масштабируемый пользователем»
“ масштабируемый пользователем Атрибут ' разрешает или запрещает пользователю уменьшать или увеличивать масштаб экрана веб-страницы, установив значение ' Нет ' или ' да ». Метатег, который позволяет пользователю увеличивать или уменьшать масштаб:
< мета имя '=' 'окно просмотра' содержание '=' «ширина = ширина устройства, масштабируемость пользователем = да» >Как использовать метатег Viewport для адаптивного веб-дизайна в HTML?
Чтобы лучше понять использование метатега окна просмотра для адаптивного веб-дизайна. Давайте рассмотрим пример:
Предположим, внутри « <дел> » тег есть несколько « <р> ” теги и изображения, вставленные на веб-страницу с помощью “ <изображение> ' ярлык:
< див >< п >
< б > Работает на Linuxhint, чтобы лучше понять метатег области просмотра, откройте веб-страницу на другом экране. размер устройства.< / б >
< / п >
< изображение источник '=' '../bg.jpg' все '=' 'Хакер' ширина '=' '460' высота '=' «3. 4. 5» >
< п стиль '=' 'отступ: 5px' >
< я >Присоединяйтесь к команде Linuxhint < / я >
Работает на Linuxhint, чтобы лучше понять метатег области просмотра, откройте веб-страницу на другом экране. размер devices.Powered by Linuxhint, чтобы лучше понять метатег области просмотра, откройте веб-страницу на другом экране. размер devices.Powered by Linuxhint, чтобы лучше понять метатег области просмотра, откройте веб-страницу на другом экране. размер devices.Powered by Linuxhint, чтобы лучше понять метатег области просмотра, откройте веб-страницу на другом экране. размер устройства.
< / п >
< / див >
После компиляции приведенного выше фрагмента кода веб-страница выглядит так:
Вывод показывает, что содержимое не отвечает, поскольку оно не отображается идеально на небольших устройствах.
Теперь, чтобы сделать его отзывчивым, добавьте « окно просмотра ” метатег:
< голова >< мета имя '=' 'окно просмотра' содержание '=' 'ширина = ширина устройства, начальный масштаб = 1,0' / >
< / голова >
После обновления кода веб-страница выглядит так на разных размерах экрана:
Окончательный вывод показывает, что веб-страница теперь отвечает после добавления метатега внутри « <голова> ' ярлык.
Заключение
Метатег viewport позволяет разработчику предоставить браузеру набор инструкций, которые определяют, как веб-страница будет отображаться на устройствах с разным размером экрана. Метатег помещается внутри « <голова> » и содержит атрибуты, помогающие создавать адаптивный дизайн веб-сайта. В этом блоге показано, как использовать метатег области просмотра для адаптивного веб-дизайна в HTML.