RWD viewport
Viewport’ni sozlash
Viewport — veb-sahifaning foydalanuvchiga ko‘rinadigan maydonidir.
Viewport qurilmaga qarab o‘zgaradi (mobil telefondagi viewport kompyuter ekraninikidan ancha kichik bo‘ladi).
Barcha veb-sahifalaringizning <head> bo‘limida quyidagi <meta> elementini kiritishingiz kerak:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bu brauzerga sahifa o‘lchamlari va masshtabini qanday boshqarish bo‘yicha ko‘rsatmalar beradi.
width=device-width qismi sahifa kengligini qurilma ekran kengligiga mos qiladi (qurilmaga qarab farq qiladi).
initial-scale=1.0 qismi sahifa brauzerda birinchi marta yuklanganda boshlang‘ich masshtab darajasini belgilaydi.
Mana viewport meta tegisiz veb-sahifa va shu veb-sahifaning viewport meta tegi bilan holatiga misol:
Maslahat: Agar bu sahifani telefon yoki planshet bilan ko‘rayotgan bo‘lsangiz, farqni ko‘rish uchun yuqoridagi ikkita havolani bosishingiz mumkin.
Kontentni ko‘rish oynasiga moslashtirish
Foydalanuvchilar saytlarni kompyuterda ham, mobil qurilmalarda ham vertikal scroll qilishga odatlangan — lekin gorizontal emas!
Shu sababli, foydalanuvchi butun veb-sahifani ko‘rish uchun gorizontal scroll qilishga yoki kichraytirishga majburlansa, bu yomon foydalanuvchi tajribasiga olib keladi.
Amal qilish kerak bo‘lgan ba’zi qo‘shimcha qoidalar:
1. Katta qat’iy kenglikli elementlardan FOYDALANMANG — Masalan, rasmning kengligi viewport’dan katta bo‘lsa, viewport gorizontal scroll qilinadi. Bu kontentni viewport kengligiga sig‘adigan qilib moslashtirishni unutmang.
2. Kontentning yaxshi render bo‘lishini muayyan kenglikka bog‘lamang — Ekran o‘lchamlari qurilmalar orasida juda farq qilgani uchun kontentning yaxshi render bo‘lishi muayyan viewport kengligiga bog‘liq bo‘lmasligi kerak.
3. Kichik va katta ekranlar uchun turli uslublar qo‘llash uchun CSS media so‘rovlaridan foydalaning — Sahifa elementlariga katta absolyut CSS kengliklari belgilash elementlarni kichik qurilmalar uchun juda keng qilib qo‘yadi. Buning o‘rniga width: 100% kabi nisbiy kenglik qiymatlaridan foydalanishni o‘ylab ko‘ring. Shuningdek, katta absolyut joylashtirish qiymatlaridan foydalanishda ehtiyot bo‘ling. Bu elementning kichik qurilmalarda viewport’dan tashqariga chiqishiga olib kelishi mumkin.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!