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.

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:

content=”” ichida bir necha qiymatlar joylashtirish mumkin. Masalan, viewport kengligini 320px ga o’rnatish mumkin:

Moslashuvchan maketlar uchun esa viewport kengligini qurilma ekrani kengligiga tenglashtirib qo’yiladi:

Sahifa ochilgandagi zoom darajasini ham o’rnatib qo’yish mumkin.

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:

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:

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;
}