Veb-saytning mobil versiyasini qanday ko’rish mumkin: atigi 3 marta bosish bilan

Veb-saytning mobil versiyasini qanday ko’rish bilan kurashyapsizmi?

Xo’sh, bitta aniq yechim – telefoningizni chiqarib, u erda veb-saytni ochish. Ammo, agar siz ushbu maqolani o’qiyotgan bo’lsangiz, negadir bu sizga mos kelmaydi.

Yaxshiyamki, ish stoli veb-brauzeringizdan veb-saytning mobil versiyasini ko’rishning boshqa ko’plab usullari mavjud. Shunday qilib, telefonga kirish imkoningiz bo’lmasa ham, nima bo’lishidan qat’i nazar, veb-saytning mobil versiyasini osongina ko’rishingiz mumkin bo’ladi.

Ushbu postda biz veb-saytning mobil versiyasini oldindan ko’rishning to’rtta oddiy usulini baham ko’ramiz:

• Birinchi ikkita usul har qanday turdagi veb-saytlar bilan ishlaydi, u sizning veb-saytingiz yoki boshqa birovning sayti bo’ladimi va u WordPress, Shopify, Wix, Squarespace yoki boshqa biror narsa bilan qurilgan bo’lishidan qat’i nazar.
• Oxirgi ikkita usul WordPress saytingizning mobil versiyasini qanday ko’rishni ko’rsatadigan WordPress-ga xos variantlardir. Bular faqat saytga egalik qilganingizda ishlaydi.

Brauzeringizdan veb-saytning mobil versiyasini qanday ko’rish mumkin

Siz veb-saytga egasizmi yoki yo’qmi, Internetdagi istalgan veb-saytning mobil versiyasini ko’rishning ikkita oson yo’li mavjud:

1. Veb-brauzeringizning ishlab chiquvchi vositalaridan foydalaning. Buning uchun Chrome juda yaxshi ishlaydi, ammo boshqa veb-brauzerlarning aksariyati shunga o’xshash vositalarni taklif qiladi.
2. Maxsus mobil emulyator vositasidan foydalaning. Siz faqat ko’rmoqchi bo’lgan URL manzilini kiritasiz va uni mobil foydalanuvchi kabi ko’rib chiqishingiz mumkin bo’ladi.

Keling, ikkala usulni ham ko’rib chiqaylik. Keyinchalik, biz sizga mobil versiyani qanday ko’rishni ham ko’rsatamiz o’zingiz yaratayotgan veb-sayt (WordPressda).

Veb-brauzeringizning ishlab chiquvchi vositalaridan foydalaning

Google Chrome, Safari, Firefox, Microsoft va Brave kabi ko’pgina brauzerlar veb-saytni qazib olish, jumladan, uning turli qurilmalarda qanday ko’rinishini ko’rish imkonini beruvchi dasturchilar vositalarini taklif qiladi.

Ishlab chiquvchi vositalari yordamida veb-sayt turli smartfonlar, planshetlar va hokazolarda qanday ko’rinishini tezda ko’rishingiz mumkin.

Ushbu misollar uchun siz Chrome (yoki Chromium-ga asoslangan istalgan brauzer, masalan, Brave) dan foydalanasiz deb taxmin qilamiz. Biroq, boshqa veb-brauzerlarning ko’pchiligi shunga o’xshash xususiyatlarni taklif qiladi, ammo interfeys boshqacha bo’ladi.

Boshlash uchun veb-saytingizning old tomonini o’ng tugmasini bosing va tanlang Tekshirish menyudan:

Bu ishlab chiquvchi vositalarini ishga tushiradi va o’ng tomonda ushbu sahifadagi kodlash elementlari bilan modulni ochadi.

Kodlash haqida tashvishlanishingiz shart emas, chunki asosiy maqsad veb-saytning mobil versiyasini ko’rishga o’tishdir. Kichikni toping Qurilma asboblar panelini almashtirish tugmasini bosing (u telefon va planshet belgisiga o’xshaydi) va mobil ko’rinishni faollashtirish uchun uni bosing.

Bu avtomatik ravishda sezgir, mobil ko’rinishni ko’rsatadi, bu erda siz qaysi qurilmaga taqlid qilmoqchi ekanligingizga qarab qurilma o’lchamlarini o’zgartirishingiz mumkin:

Ushbu usulni yanada jozibador qilish uchun, bu sizning veb-saytingiz haqiqiy qurilmalarda qanday ko’rinishini aniqroq ko’rish imkonini beruvchi o’rnatilgan qurilma standart sozlamalari bilan bir nechta variantlardan biridir.

Misol tariqasida, siz iPad Pro-ni tanlashingiz mumkin va u bir zumda displey o’lchamlarini iPad Pro o’lchamiga moslashtiradi.

Yoki kichikroq Pixel 2 XL ni tanlashingiz mumkin.

Yoki undan ham kichikroq Galaxy Fold. Ro’yxatdagi qurilmalarning har birini sinab ko’ring va veb-saytingiz har birida maqbul ko’rinishiga ishonch hosil qiling.

Onlayn tester yoki emulyatordan foydalaning

Emulyatorlar odatda ilovalarni o’zlarining mahalliy muhitlarida sinab ko’rish uchun ishlatiladi, ammo ularning ko’pchiligi veb-saytlarning sezgirligi uchun mavjud. Shuningdek, URL manzilingizga joylashtirish va kichikroq qurilmalarda qanday koʻrinishini koʻrish uchun asosiy testerlarni onlaynda topishingiz mumkin.

ResponsivePX.com – bu maqbul variant, lekin siz tez onlayn qidiruv orqali ko’plab boshqalarni topishingiz mumkin.

Odamlarga emulyatorlar va simulyatorlarni sinab ko’rishni taklif qilishimizning sababi shundaki, ular sizga sayt o’lchamlarini ko’proq boshqarish imkonini beradi. Va ular ko’pincha brauzeringizning ishlab chiquvchi vositalaridan foydalanishdan ko’ra osonroqdir.

Masalan, ResponsivePX.com ni olaylik: Siz saytga kirasiz, URL manzilini kiritasiz va darhol mobil versiyani ko’rasiz.

Bu sizga kenglik, balandlik va aylantirish paneli ko’rinishini sozlash imkonini beradi. Hatto natijalarni tashkilotingizdagi odamlar bilan baham ko’rishingiz mumkin.

WordPress veb-saytingizning mobil versiyasini qanday ko’rish mumkin

Agar siz o’zingizning WordPress saytingizda ishlayotgan bo’lsangiz, WordPress saytingiz mobil qurilmalarda qanday ko’rinishini ko’rishga yordam beradigan ba’zi o’rnatilgan variantlarni ham taqdim etadi.

WordPress muharririda ishlayotganingizda, kontentingiz turli qurilmalarda qanday ko’rinishini tezda ko’rishingiz mumkin. WordPress Customizer-da mavzuni sozlashda ham xuddi shunday qilishingiz mumkin.

Keling, ushbu usullarni ko’rib chiqaylik …

Mobil versiyani sahifa yoki post muharririni oldindan ko’rish orqali ko’ring

Siz veb-saytning mobil versiyasini sahifama-sahifa asosida ko’rishingiz mumkin. Misol uchun, siz hozirgi blog postingiz mobil ko’rinishida ko’rinadigan ko’rinishini ko’rishni xohlashingiz mumkin. Bosh sahifangizning mobil aloqa tezligini tekshirish ham oqilona bo‘ladi, ayniqsa dizaynni o‘zgartirgandan keyin.

Bosh sahifadan boshlaylik. Quyidagi veb-sayt ish stoli ko’rinishida qanday ko’rinadi:

Siz alohida sahifani ko’rishingiz va mobil ko’rinishlarni joylashtirishingiz mumkin Xabarlar yoki Sahifalar WordPress asboblar panelidagi yorliqlar.

Oldindan yaratilgan xabarlar va sahifalar uchun ga o’ting Barcha xabarlar yoki Barcha sahifalar.

Biz sahifadan boshlaymiz; aniqrog’i, Bosh sahifa. Istagan sahifangizni tanlang.

WordPress backendidagi har bir sahifa va post yuqori o’ng burchakda Ko’rib chiqish havolasini taqdim etadi. Quyidagi variantlar bilan ochiladigan menyuni ochish uchun “Ko‘rib chiqish” tugmasini tanlang:

Odatiy bo’lib, WordPress ish stoli versiyasini ko’rsatadi.

Veb-saytingiz tasvirlar, videolar, menyular va matn qutilari kabi elementlarni kichikroq, o’qilishi va bosiladigan formatga o’zgartirishini ko’rish uchun Planshet yoki Mobil ko’rinishini tanlang.

Saytingizni boshqa ko’rinishlarda sinab ko’rayotganda, havolalarni bosish mumkin (juda kichik emas), aktivlar hali ham ko’rinib turishini va foydalanuvchini kattalashtirishga majburlamasdan hamma narsa aniq bo’lishini tekshiring.

Barcha tarkibni tekshirish uchun sahifani pastga aylantirish uchun biroz vaqt ajrating. Ushbu sayt, masalan, bosh sahifada tasvirlar, mahsulot nomlari va savatga qo’shish tugmalari bilan bir nechta elektron tijorat mahsulotlarini ro’yxatga oladi.

Ular yaxshi ko’rinadi, lekin mahsulot tafsilotlarini kattaroq qilish uchun ikkita yoki uchta mahsulot ustuniga o’tishni xohlaymiz.

Ushbu usuldan foydalanganda xabarlar farq qilmaydi. Ular WordPress-ning alohida bo’limi ostida joylashgan (Xabarlar → Barcha xabarlar).

Ularda qanday qilib statik veb-sahifalar emas, balki blogingiz postlari borligini ko‘rib, mobil mosligini sinab ko‘rish yanada muhimroq. Nega? Chunki ko’plab kompaniyalar har oy sahifalarida kichik yangilanishlar bilan o’nlab blog postlarini nashr etadilar. Agar blog sizning asosiy kontent manbangiz bo’lsa, nashr qilishdan oldin ularning har biri mobil qurilmaga tayyor ekanligiga ishonch hosil qilishingiz kerak.

Odatdagidek, Ko’rib chiqishga o’ting, keyin Planshet yoki Mobil-ni bosing.

Ish stoli ko’rinishi vaqti-vaqti bilan Planshet ko’rinishiga juda o’xshaydi, shuning uchun brauzeringizda kattalashtirilmaganligiga ishonch hosil qiling.

Planshet ko’rinishi ish stoli ko’rinishidan biroz kichikroq ko’rinadi, lekin sayt mazmuni atrofida qora bo’sh joy mavjud bo’lib, yanada realroq planshet o’lchamiga taqlid qiladi.

WordPress Customizer-da veb-saytning mobil versiyasini ko’ring

WordPress Customizer nafaqat WordPress mavzusini tahrirlashning ajoyib usullarini taqdim etadi, balki tahrir qilganingizda saytingizning vizual ko’rinishini ham taqdim etadi.

Yaxshiyamki, WordPress Customizer sizni faqat ish stolini oldindan ko’rish bilan cheklab qo’ymaydi. Haqiqatan ham, mobil telefon yoki planshet ko’rinishiga qarab, barcha tahrirlaringizni bajarishingiz mumkin.

Buni amalga oshirish uchun quyidagi manzilga o’ting Tashqi ko’rinish → Moslashtiring Customizerni ishga tushirish uchun.

Odatiy bo’lib, bu erda Customizer qanday ko’rinishga ega. U standart ish stoli ko’rinishida, chap tomonda sozlash sozlamalari va o’ng tomonda saytni oldindan ko’rish.

Sozlamalar roʻyxatining eng pastki qismiga qarab uchta tugma piktogrammasini toping: biri ish stoli koʻrinishi uchun, ikkinchisi planshet koʻrinishi uchun, uchinchisi esa mobil koʻrinish uchun.

Sizning joriy tahrirlaringiz umumiy planshet o’lchamidagi interfeysda qanday ko’rinishini ko’rish uchun Planshet ko’rinishi tugmasini bosing.

Mobil ko’rinish tugmasi ushbu interfeysni kichikroq qiladi, bu sizni mobil smartfonning standart oyna o’lchamiga yaqinlashtiradi.

Eslatma: Yodda tutingki, bu backend mobil ko‘rib chiqishlar taxminiy hisoblanadi. Dunyoda juda ko’p turdagi qurilmalar bilan hech kim bir xil narsani ko’rmaydi.

Menyular haqida unutmang. Mobil qurilmalarda menyular juda muammoli. Mavzuni ishlab chiquvchisi katta miqdordagi sinovdan o’tganligini tekshiring. Mobil menyu odatda yashirin gamburger menyusiga (uchta gorizontal chiziq) joylashtirilishini va siz ikkita menyuga ega bo’lishingiz mumkinligini (masalan, ushbu mavzu ekranning pastki qismidagi elektron tijorat tugmalarini qanday taqdim etishi) e’tibor qaratasiz.

Har doimgidek, birinchi sahifani tezda ko’rib chiqishdan va butun veb-saytingiz tayyor deb o’ylamang. Bu sizning umumiy foydalanuvchi tajribangizga zarar etkazadigan kichik kamchiliklarni o’tkazib yuborish retsepti.

Planshet ko’rinishida butun veb-saytingizni, jumladan, mahsulot sahifalaridan tortib blog postlarigacha, xarid qilish aravachalari va biz haqimizda sahifalargacha bo’lgan barcha narsalarni ko’rib chiqing.

Va mobil ko’rinishda xuddi shu jarayonni bajaring. Biz, ayniqsa, elektron tijorat funksiyalarini sinab ko’rishni tavsiya qilamiz, chunki siz istagan oxirgi narsa kichik to’lov moduli yoki Savatga qo’shish tugmasi.

Veb-saytning mobil versiyasini ko’rish oson

Eng moslashuvchan variant brauzeringizning ishlab chiquvchi vositalaridan foydalanishdir. Bu nima bo’lishidan qat’iy nazar ishlaydi. Veb-saytning ish stoli versiyasini ochishingiz mumkin ekan, ishlab chiquvchi vositalaridan foydalangan holda mobil versiyani oldindan ko’rishingiz mumkin.

Emulyator yondashuvi aksariyat veb-saytlar bilan ham ishlaydi, ammo emulyator veb-saytni olishi uchun veb-sayt hamma uchun ochiq URL manziliga ega bo’lishi kerak.

Boshqa tomondan, agar siz WordPress foydalanuvchisi bo’lsangiz, saytingizda ishlayotganingizda ishni bajarish uchun WordPress-ning o’rnatilgan sezgir oldindan ko’rish vositalariga tayanishingiz mumkin. Yoki boshqa usullar ham WordPress saytlari uchun juda yaxshi ishlaydi.

Agar sizga oʻz saytingizda ishlash uchun mobil koʻrinish kerak boʻlsa, saytingizning mobil versiyasini koʻrishda nimalarga eʼtibor berish kerakligi haqida baʼzi maslahatlar uchun mobil qurilmalarga mos veb-sayt yaratish boʻyicha qoʻllanmamizni ham koʻrib chiqishingiz mumkin.