Moslashuvchan web-dizayn: viewport

Ko’pchilik web developerlar meta tegida viewreport atributiga ko’p duch kelishgan va ushbu maqolada bu atributni vazifasi va ishlatilishini ko’rib chiqamiz.
<meta name="viewport" content="initial-scale=1">

Ushbu misolni ko’raylik. Sahifa ochilganda, sarlavha qizil rangda turibdi, agar brovzer enini kichiklashtirsak, qaysidir o’lchamga kelib, sahifa stili o’zgaradi.
Firefoxda ko'rinishi(demo):


Bu esa oyna eniga siqilgandagi ko’rinishi:


Endi buni smartfonda ko’rinishi (Android standart brovzerida):


Eng birinchi e’tiborli narsa bu, sarlavha qizil rangdaligi. Aslida, biz kichik maketni kutgan edik, lekin uning o’rniga maketning “zoom out”, ya’ni uzoqlashgan variantda chiqdi.

Bu yerda, iOS Safari web sahifani 980px kenglikda deb hisoblayapdi, va agar zoom in (yaqinlashtirish) qilmasangiz, kontentni ko’rishga kichiklik qiladi. Buning asosiy sababi, siz web sahifaga telefondan kirganingizda, u sizni kata o’lchamdagi monitordan foydalanyapdi deb o’ylaydi.

Viewport meta tegi
Viewport meta tegasi avval Apple tomonidan ishlab chiqilgan va tanishtirilgan, so’ngra boshqalar tomonidan o’zlashtirilgan:
<meta name="viewport" content="">

content=”” ichida bir necha qiymatlar joylashtirish mumkin. Masalan, viewport kengligini 320px ga o’rnatish mumkin:
<meta name="viewport" content="width=320">

Moslashuvchan maketlar uchun esa viewport kengligini qurilma ekrani kengligiga tenglashtirib qo’yiladi:
<meta name="viewport" content="width=device-width">

Sahifa ochilgandagi zoom darajasini ham o’rnatib qo’yish mumkin.
<meta name="viewport" content="initial-scale=1">

Bunda, sahifa ochilganda, zoom 1:1 mashtabda ochiladi, ya’ni hech qanday yaqinlashish yoki uzoqlashish bo’lmaydi. Shuningdek, zoom ni chegaralab qo’yish ham mumkin:
<meta name="viewport" content="maximum-scale=1">

Bunda, zoomni yaqinlashtirib bo’lmaydi. Lekin shuni esda tutingki, viewportni noto’g’ri ishlatish foydalanuvchilarga sahifani ko’rishda muammolarga olib kelishi mumkin.

Quidagi kod bizga to’g’ri ko’rinishni chiqarib beradi:
<meta name="viewport" content="width=device-width, initial-scale=1">


Demo


Ko’rib turganingizdek, hammasi joyida. Endi landscape rejimida ko’ramiz:


Viewportni CSS orqali ham berish mumkin. Buning uchun @viewport atributi ishlatiladi:
@viewport{
    zoom: 1.0;
    width: device-width;
}

2 комментария

shranet
Yaqinda shu muammoga duch kegandim. Sal oldinroq yozmadingda :)
0