Този блог ще обясни как да използвате мета таг на viewport за адаптивен уеб дизайн в HTML:
Какво представлява мета тагът Viewport?
„ прозорец за изглед ” е най-важният таг за създаване на отзивчив дизайн чрез контролиране на това как съдържанието се показва на различни размери на екрана. Този етикет се поставя вътре в „ <глава> ” раздел и съдържа два атрибута в него. Първият е „ име ”, който казва целта на този етикет, а вторият е „ съдържание ”, който съдържа данните, свързани със стойността, предоставена в „ име ' атрибут.
Различни атрибути на мета тага Viewport
Мета тагът на прозореца за изглед има следните атрибути, които могат да бъдат поставени като стойност за „ съдържание ' атрибут:
атрибут 'ширина'.
„ ширина ” определя видимата област на уеб страница за съдържанието вертикално. Неговият мета таг изглежда така:
< мета име = 'viewport' съдържание = 'width=device-width' >
атрибут 'височина'.
„ височина ” задава вертикалната дължина на уеб страницата, за да гарантира, че височината на прозореца за изглед съответства на височината на екрана. Неговият мета таг изглежда така:
< мета име = 'viewport' съдържание = 'височина=400' >
Атрибут „начален мащаб“.
„ Първоначален мащаб ” гарантира, че уеб страницата се показва с подходящо ниво на мащабиране при първото зареждане. Например посетете кода по-долу:
< мета име = 'viewport' съдържание = 'width=device-width, initial-scale=1.0' >атрибут „максимален мащаб“.
„ максимална скала ” определя максималното ниво на мащабиране за уеб страницата, за да предотврати проблеми с оформлението:
< мета име = 'viewport' съдържание = 'width=device-width, maximum-scale=1.0' >
атрибут „минимален мащаб“.
„ минимален мащаб ” се използва, за да ограничи потребителя да не намалява твърде много, като посочва минималното ниво на мащаба на мащаба:
< мета име = 'viewport' съдържание = 'width=device-width, minimum-scale=0.5' >атрибут „мащабируем от потребителя“.
„ мащабируеми от потребителя ” позволява или не позволява на потребителя да накара екрана на уеб страницата да намали или увеличи мащаба, като зададе стойността на „ Не ' или ' да ”. Мета тагът, който позволява на потребителя да увеличава или намалява е:
< мета име = 'viewport' съдържание = 'width=device-width, user-scalable=yes' >Как да използвам мета маркер Viewport за адаптивен уеб дизайн в HTML?
За по-добро разбиране на използването на мета таг на прозорец за изглед за адаптивен уеб дизайн. Нека преминем през пример:
Да предположим, че вътре в „ След компилирането на горния кодов фрагмент, уеб страницата изглежда така: Изходът показва, че съдържанието не реагира, тъй като не се показва перфектно на малки устройства. Сега, за да го направите отзивчив, добавете „ прозорец за изглед ” мета таг: След актуализиране на кода уеб страницата изглежда така на различни размери на екрана: Крайният изход показва, че уеб страницата вече реагира след добавянето на мета таг вътре в „ <глава> ” таг. Мета тагът viewport позволява на разработчика да предостави набор от инструкции на браузъра, който задава как уеб страницата да се показва на устройства с различен размер на екрана. Мета тагът се поставя вътре в „ <глава> ” и съдържа атрибути, които помагат при изграждането на адаптивни дизайни на уебсайтове. Този блог демонстрира как да използвате мета таг за прозорец за отзивчив уеб дизайн в HTML. ” етикет: < див >
< стр >
< b > Осъществено от Linuxhint, за да разберете по-добре мета тага на прозореца за изглед, отворете уеб страницата на различен екран размер устройства.< / b >
< / стр >
< img src = '../bg.jpg' всичко = 'хакер' ширина = '460' височина = '3. 4. 5' >
< стр стил = 'padding:5px' >
< i >Присъединете се към екипа на Linuxhint < / i >
Осъществено от Linuxhint, за да разберете по-добре мета маркера на прозореца за изглед, отворете уеб страницата на различен екран размер устройства. Осъществено от Linuxhint, за да разберете по-добре мета маркера на прозореца за изглед, отворете уеб страницата на различен екран размер устройства. Осъществено от Linuxhint, за да разберете по-добре мета маркера на прозореца за изглед, отворете уеб страницата на различен екран размер устройства. Осъществено от Linuxhint, за да разберете по-добре мета маркера на прозореца за изглед, отворете уеб страницата на различен екран размер устройства.
< / стр >
< / див >
< мета име = 'viewport' съдържание = 'width=device-width, initial-scale=1.0' / >
< / глава >
Заключение