Овај блог ће објаснити како да користите мета ознаку области приказа за прилагодљиви веб дизајн у ХТМЛ-у:
Шта је метаознака видног поља?
„ виевпорт ” је најважнија ознака за креирање респонзивног дизајна контролисањем начина на који се садржај појављује на различитим величинама екрана. Ова ознака се налази унутар „ <хеад> ” и садржи два атрибута у себи. Први је „ име ” атрибут који говори сврху ове ознаке, а други је „ садржаја ” који садржи податке који се односе на вредност дату у „ име ” атрибут.
Различити атрибути метаознака Виевпорт-а
Мета ознака области приказа има следеће атрибуте који се могу поставити као вредност за „ садржаја ” атрибут:
атрибут „ширина“.
„ ширина ” атрибут специфицира видљиво подручје веб странице за садржај вертикално. Његова мета ознака изгледа овако:
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх' >
атрибут „висине“.
„ висина ” атрибут поставља вертикалну дужину веб странице како би се осигурало да висина прозора одговара висини екрана. Његова мета ознака изгледа овако:
< мета име = 'виевпорт' садржаја = 'висина=400' >
Атрибут „почетне размере“.
„ Инитиал-сцале ” атрибут осигурава да се веб страница прикаже на одговарајућем нивоу зумирања када се први пут учита. На пример, посетите код у наставку:
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, инитиал-сцале=1.0' >атрибут „максималне скале“.
„ максимум-скале ” атрибут одређује максимални ниво зумирања за веб страницу да би се спречили проблеми са изгледом:
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, макимум-сцале=1.0' >
атрибут „минималне размере“.
„ минималне скале ” се користи да ограничи корисника да превише умањује навођењем минималног нивоа умањивања:
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, минимум-сцале=0,5' >„усер-сцалабле“ атрибут
„ скалабилан корисник ” атрибут дозвољава или не дозвољава кориснику да умањи или увећа екран веб странице постављањем вредности на „ Не ” или “ да ”. Мета ознака која омогућава кориснику да увећа или умањи је:
< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, усер-сцалабле=иес' >Како користити мета ознаку Виевпорт за прилагодљиви веб дизајн у ХТМЛ-у?
Да бисте боље разумели употребу метаознаке области приказа за прилагодљиви веб дизајн. Хајде да прођемо кроз пример:
Претпоставимо да унутар „ <див> “ постоји више ознака “ <п> ” ознаке и слике уметнуте на веб страницу помоћу „ <имг> ” ознака:
< див >< стр >
< б >Покреће Линукхинт, да бисте боље разумели мета ознаку оквира за приказ, отворите веб страницу на другом екрану величина уређаја.< / б >
< / стр >
< имг срц = '../бг.јпг' све = 'хакер' ширина = '460' висина = '3. 4. 5' >
< стр стил = 'паддинг:5пк' >
< и >Придружите се Линукхинт тиму < / и >
Покреће Линукхинт, да бисте боље разумели мета ознаку оквира за приказ, отворите веб страницу на другом екрану величина уређаји.Покреће Линукхинт, да бисте боље разумели мета ознаку оквира за приказ, отворите веб страницу на другом екрану величина уређаји.Покреће Линукхинт, да бисте боље разумели мета ознаку оквира за приказ, отворите веб страницу на другом екрану величина уређаји.Покреће Линукхинт, да бисте боље разумели мета ознаку оквира за приказ, отворите веб страницу на другом екрану величина уређаја.
< / стр >
< / див >
Након компилације горњег исечка кода, веб страница изгледа овако:
Излаз показује да садржај не реагује јер се не приказује савршено на малим уређајима.
Сада да бисте га учинили прилагодљивим, додајте „ виевпорт ” мета ознака:
< глава >< мета име = 'виевпорт' садржаја = 'видтх=девице-видтх, инитиал-сцале=1.0' / >
< / глава >
Након ажурирања кода, веб страница изгледа овако на различитим величинама екрана:
Коначни резултат илуструје да веб страница сада реагује након додавања мета ознаке унутар „ <хеад> ” ознака.
Закључак
Мета ознака области приказа омогућава програмеру да пружи скуп упутстава претраживачу који одређује како ће се веб страница приказивати на уређајима различите величине екрана. Мета ознака се налази унутар „ <хеад> ” и садржи атрибуте који помажу у изградњи респонзивног дизајна веб локација. Овај блог је показао како да користите мета ознаку области приказа за прилагодљиви веб дизајн у ХТМЛ-у.