Nakipag-ugnayan sa akin kamakailan ang isang kaibigan ko upang humingi ng tulong sa isang WordPress site na ginawa niya gamit ang X na tema. Tinawagan siya ng kanyang kliyente noong umagang iyon pagkatapos niyang mapansin na hindi ipinapakita nang tama ang kanyang website sa kanyang iPhone. Si Nick mismo ang nagsuri nito, at sigurado, hindi na gumagana ang magandang tumutugon na disenyo na kanyang idinisenyo.
Lalong nabigla siya sa katotohanang noong binago niya ang laki ng kanyang browser window sa kanyang desktop, tumutugon ang site, ngunit sa kanyang iPhone, ang desktop na bersyon lang ang ipinapakita. Bakit magiging tumutugon ang isang site sa isang desktop computer at hindi tumutugon sa isang mobile device?
Bakit Hindi Gumagana ang Responsive na Disenyo
Tumitigil sa paggana ang disenyong tumutugon kapag may nawawalang isang linya ng code sa header ng isang HTML file. Kung nawawala ang solong linya ng code na ito, ipapalagay ng iyong iPhone, Android, at iba pang mga mobile device na ang website na iyong tinitingnan ay isang full-size na desktop site at isasaayos ang laki ng viewportupang saklawin ang buong screen.
Ano ang Ibig Sabihin Mo sa Viewport at Laki ng Viewport?
Sa lahat ng device, ang laki ng viewport ay tumutukoy sa laki ng lugar ng isang webpage na kasalukuyang nakikita ng user. Isipin na may hawak kang iPhone 5 na may lapad na 320 pixels. Maliban kung tahasang sinabing iba, ipinapalagay ng mga iPhone na ang bawat website na binibisita mo ay isang desktop site na may lapad na 980px.
Ngayon, gamit ang iyong haka-haka na iPhone 5, bumisita ka sa isang website na idinisenyo para sa desktop na 800px ang lapad. Wala itong tumutugon na layout, kaya ipinapakita ng iyong iPhone ang buong lapad na bersyon ng desktop.
Hindi. Sa laki ng viewport, maaaring kasangkot ang pag-scale . Ang iPhone ay kailangang mag-zoom out upang makita ang buong lapad na bersyon ng webpage. Tandaan na ang viewport ay tumutukoy sa lugar ng isang page na kasalukuyang nakikita ng user. Kasalukuyang 320 pixels lang ng page ang nakikita ng user ng iPhone, o nakikita ba nila ang full-width na bersyon?
Tama: Nakikita nila ang buong lapad na webpage sa kanilang display dahil ipinapalagay ng iPhone na ito ang default na gawi: Naka-zoom out ito para matingnan ng user ang isang webpage hanggang sa lapad na 980 pixels. Samakatuwid, ang viewport ng iPhone ay 980px.
Habang nag-zoom in o out ka, nagbabago ang laki ng viewport. Sinabi namin noon na ang aming haka-haka na website ay may lapad na 800px, kaya kung mag-zoom ka sa iyong iPhone upang ang mga gilid ng website ay hawakan ang mga gilid ng display ng iyong iPhone, ang viewport ay magiging 800px. Ang iPhone ay maaaring magkaroon ng viewport na 320px sa isang desktop site, ngunit kung mayroon ito, makikita mo lamang ang isang maliit na bahagi nito.
Sira ang Aking Tumutugon na Website. Paano Ko Ito Aayusin?
Ang sagot ay isang linya ng HTML na kapag inilagay sa header ng isang webpage ay nagsasabi sa device na itakda ang viewport sa sarili nitong lapad (320px sa kaso ng isang iPhone 5) at huwag i-scale (o i-zoom) ang page.
Para sa mas teknikal na talakayan sa lahat ng opsyong nauugnay sa meta tag na ito, tingnan ang artikulong ito sa tutsplus.com.
Paano Ayusin ang WordPress X Theme Kapag Hindi Ito Tumutugon
Balik sa aking kaibigan mula sa dati: Nawala ang isang linya ng code na ito nang i-update niya ang X na tema. Kapag inaayos ang sa iyo, tandaan na ang X na tema ay hindi gumagamit ng isang header file lang – gumagamit ito ng iba't ibang header file para sa bawat stack, kaya kailangan mong i-edit ang sa iyo.
Dahil ginagamit ni Nick ang Ethos stack ng X na tema, kailangan niyang magdagdag ng linya ng code na binanggit ko noon sa header file na matatagpuan sa x /frameworks/views/ethos/wp-header.php . Kung gagamit ka ng ibang stack, palitan ang pangalan ng iyong stack (Integrity, Renew, atbp.) para sa 'ethos' upang mahanap ang tamang header file. Ipasok ang isang linya, at voila! Handa ka nang umalis.
Kaya Inaayos din Nito ang Aking Mga CSS Media Query?
Kapag inilagay mo ang linyang iyon sa header ng iyong HTML file, ang iyong tumutugon na @media query ay biglang magsisimulang gumana muli at ang mobile na bersyon ng iyong website ay bubuhayin muli. Salamat sa pagbabasa at sana makatulong!
Tandaan ang Payette Forward, David P.
