Yaqinda bir do'stim X mavzusidan foydalangan holda yaratgan WordPress saytida yordam so'rab men bilan bog'landi. Uning mijozi o'sha kuni ertalab uning veb-sayti iPhone-da to'g'ri ko'rinmayotganini payqaganidan keyin unga qo'ng'iroq qilgan. Nik buni o'zi tekshirib ko'rdi va shubhasiz, u yaratgan chiroyli javob beruvchi dizayn endi ishlamay qoldi.
U o'z ish stolidagi brauzer oynasining o'lchamini o'zgartirganda, saytni yanada sirli qildi edi sezgir, ammo uning iPhone-da faqat ish stoli versiyasi ko'rsatildi. Nima uchun sayt bo'lishi mumkin? ish stoli kompyuterda sezgir va mobil qurilmada javob bermaydimi?
Nima uchun sezgir dizayn ishlamaydi
HTML-fayl sarlavhasida bitta satr kodi yo'qolganda, javob beradigan dizayn ishlashni to'xtatadi. Agar ushbu bitta kod satri etishmayotgan bo'lsa, iPhone, Android va boshqa mobil qurilmalar siz ko'rib turgan veb-sayt to'liq hajmdagi ish stoli sayti deb o'ylaydi va ko'rinish oynasi butun ekranni qamrab olish uchun.
Viewport va viewport hajmi deganda nimani tushunasiz?
Barcha qurilmalarda ko'rish oynasining kattaligi foydalanuvchi uchun hozirda ko'rinadigan veb-sahifa maydonining hajmini bildiradi. Tasavvur qiling, eni 320 piksel bo'lgan iPhone 5 ni ushlab turibsiz. Agar boshqacha aytilmagan bo'lsa, iPhone'lar sizning tashrif buyurgan har bir veb-saytingiz kengligi 980px bo'lgan ish stoli sayti deb o'ylashadi.
Endi xayoliy iPhone 5-dan foydalanib,kengligi 800px bo'lgan ish stoli uchun mo'ljallangan veb-saytga kirasiz. Uning sezgir tartibiga ega emas, shuning uchun iPhone to'liq ish stoli versiyasini namoyish etadi.
Apple logotipiga yopishtirilgan iPhone o'chmaydi
Ammo iPhone 5 kengligi atigi 320 piksel. Bu har doim ko'rish oynasining kattaligi emasmi?
Yo'q bu emas. Ko'rish oynasi kattaligi bilan, miqyosi jalb qilinishi mumkin . Veb-sahifaning to'liq kengligi versiyasini ko'rish uchun iPhone kichraytirishi kerak. Viewport sahifaning foydalanuvchiga hozirda ko'rinadigan maydonini bildirishini unutmang. Hozirda iPhone foydalanuvchisi sahifaning atigi 320 pikselini ko'rayaptimi yoki to'liq kenglikdagi versiyasini ko'rayaptimi?
To'g'ri: Ular o'zlarining displeylarida to'liq kenglikdagi veb-sahifalarni ko'rishmoqda, chunki iPhone bu odatiy xatti-harakatni o'z zimmasiga oldi: u foydalanuvchi veb-sahifani 980 piksel kenglikgacha ko'rishi uchun kattalashtirilgan. Shuning uchun, iPhone-ning ko'rish oynasi 980px.
Kattalashtirish yoki kattalashtirishda ko'rish oynasi hajmi o'zgaradi. Ilgari bizning xayoliy veb-saytimiz 800px kengligi borligini aytgan edik, shuning uchun veb-saytning chekkalari sizning iPhone displeyingizning chekkalariga tegishi uchun iPhone-ni kattalashtirsangiz, ko'rish oynasi 800px bo'ladi. IPhone mumkin ish stoli saytida 320px ko'rish maydoniga ega bo'ling, ammo agar shunday bo'lsa, siz uning kichik qismini ko'rgan bo'lar edingiz.
iPhone 5 zaryadlovchisi ishlamaydi
Mening javob beradigan veb-saytim buzilgan. Buni qanday tuzatish kerak?
Javob HTML-ning bitta satridir, u veb-sahifaning sarlavhasiga kiritilganida, qurilmaga ko'rish oynasini o'zining kengligi (IPhone 5 uchun 320px) o'rnatishi va sahifani kattalashtirmasligi (yoki kattalashtirmasligi) kerakligini aytadi.
Ushbu meta teg bilan bog'liq barcha variantlarni batafsilroq muhokama qilish uchun, tekshiring tutsplus.com saytidagi ushbu maqola .
WordPress X mavzusiga javob bermasa, uni qanday tuzatish kerak
Oldingi do'stimga qaytib keling: X mavzusini yangilaganida ushbu bitta satr kod yo'qoldi. O'zingiznikini tuzatganda, X mavzusi faqat bitta sarlavha faylidan foydalanmasligini yodda tuting - har bir stek uchun har xil sarlavha fayllaridan foydalaniladi, shuning uchun siznikini tahrirlashingiz kerak bo'ladi.
sim iPhone 6 bypass -ni qo'llab -quvvatlamaydi
Nik 'X' mavzusidagi 'Ethos' to'plamidan foydalanganligi sababli, u x da joylashgan sarlavha fayliga oldin aytib o'tgan kod satrini qo'shishi kerak edi. /frameworks/views/ethos/wp-header.php . Agar siz boshqa stekdan foydalansangiz, to'g'ri sarlavha faylini topish uchun stack nomini (Integrity, Renew va hk) 'ethos' bilan almashtiring. Va bitta qatorni kiriting va voila! Siz borishingiz yaxshi.
Xo'sh, bu mening CSS media so'rovlarimni ham tuzatadimi?
Ushbu satrni HTML-faylingiz sarlavhasiga kiritganingizda, @media-ning javobli so'rovlari to'satdan qayta ishlay boshlaydi va veb-saytingizning mobil versiyasi hayotga qaytadi. O'qiganingiz uchun tashakkur va umid qilamanki bu yordam beradi!
Payetni oldinga yo'naltirishni unutmang,
Devid P.