Kamakailan lamang ay kinontak ako ng isang kaibigan ko upang humingi ng tulong sa isang WordPress site na itinayo niya gamit ang X na tema. Tinawagan siya ng kanyang kliyente kaninang umaga matapos niyang mapansin na ang kanyang website ay hindi ipinapakita nang tama sa kanyang iPhone. Si Nick ang nag-check out sa kanyang sarili, at sigurado na, ang magandang tumutugong disenyo na dinisenyo niya ay hindi na gumagana.
Mas lalo siyang naisip ng katotohanan na nang baguhin niya ang laki sa kanyang browser window sa kanyang desktop, ang site ay tumutugon, ngunit sa kanyang iPhone, ang bersyon ng desktop lamang ang ipinakita. Bakit magiging isang site tumutugon sa isang desktop computer at hindi tumutugon sa isang mobile device?
Bakit Hindi Gumagana ang Tumutugon na Disenyo
Ang tumutugong disenyo ay tumitigil sa paggana kapag ang isang linya ng code ay nawawala mula sa header ng isang HTML file. Kung nawawala ang solong linya ng code na ito, ipalagay ng iyong iPhone, Android, at iba pang mga mobile device na ang website na tinitingnan mo ay isang buong sukat na site ng desktop at ayusin ang laki ng viewport upang masakop ang buong screen.
Ano ang Ibig Mong Sabihin sa Laki ng Viewport at Viewport?
Sa lahat ng mga aparato, ang laki ng viewport ay tumutukoy sa laki ng lugar ng isang webpage na kasalukuyang nakikita ng gumagamit. Isipin na hawak mo ang isang iPhone 5 na may lapad na 320 mga pixel. Maliban kung malinaw na sinabi kung hindi man, ipinapalagay ng mga iPhone na ang bawat website na iyong binibisita ay isang desktop site na may lapad na 980px.
Ngayon, gamit ang iyong haka-haka na iPhone 5,binisita mo ang isang website na idinisenyo para sa desktop na 800px ang lapad. Wala itong tumutugong layout, kaya ipinapakita ng iyong iPhone ang buong lapad na bersyon ng desktop.
Hindi makikilala ng iTunes ang iphone 6
Ngunit ang isang iPhone 5 ay 320 pixel lamang ang lapad. Hindi ba laging ang laki ng viewport na iyon?
Hindi. Sa laki ng viewport, maaaring kasangkot ang pag-scale . Kailangang mag-zoom out ang iPhone upang makita ang buong lapad na bersyon ng webpage. Tandaan na ang viewport ay tumutukoy sa lugar ng isang pahina na kasalukuyang nakikita ng gumagamit. Ang gumagamit ba ng iPhone na kasalukuyang nakakakita lamang ng 320 mga pixel ng pahina, o nakikita ba nila ang buong lapad na bersyon?
Tama iyon: Nakikita nila ang buong lapad na webpage sa kanilang display dahil ipinapalagay ng iPhone na default na pag-uugali ito: Naka-zoom out ito upang makita ng gumagamit ang isang webpage hanggang sa isang lapad na 980 pixel. Samakatuwid, ang viewport ng iPhone ay 980px.
Sa pag-zoom in o out mo, nagbabago ang laki ng viewport. Sinabi namin dati na ang aming haka-haka na website ay may lapad na 800px, kaya kung dapat kang mag-zoom in 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 maaari magkaroon ng isang viewport ng 320px sa isang desktop site, ngunit kung ginawa ito, makakakita ka lamang ng isang maliit na bahagi nito.
hindi sisingilin ang ipad air
Nasira Ang Aking Tumutugon na Website. Paano Ko Maaayos Ito?
Ang sagot ay isang solong linya ng HTML na kapag naipasok sa header ng isang webpage ay sinasabi sa aparato na itakda ang viewport sa sarili nitong lapad (320px sa kaso ng isang iPhone 5) at huwag sukatin (o mag-zoom) ang pahina.
Para sa isang mas teknikal na talakayan ng lahat ng mga pagpipilian na nauugnay sa meta tag na ito, suriin ang artikulong ito sa tutsplus.com .
Paano Mag-ayos ng Tema ng WordPress X Kung Hindi Ito Tumutugon
Bumalik sa aking kaibigan mula dati: Ang isang linya ng code na ito ay nawala nang na-update niya ang X na tema. Kapag inaayos ang iyo, tandaan na ang X na tema ay hindi gumagamit ng isang header file lamang - gumagamit ito ng iba't ibang mga file ng header para sa bawat stack, kaya kakailanganin mong i-edit ang sa iyo.
ano ang ibig sabihin ng ipad na may kapansanan
Dahil ginagamit ni Nick ang Ethos stack ng X na tema, kailangan niyang magdagdag ng linya ng code na nabanggit ko dati 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! Mabuti kang pumunta.
Kaya Inaayos Nito ang Aking Mga CSS Media Query, Gayundin?
Kapag naipasok mo ang linyang iyon sa header ng iyong HTML file, biglang magsisimulang gumana muli ang iyong mga tumutugong query sa @media at magbabalik sa buhay ang mobile na bersyon ng iyong website. Salamat sa pagbabasa at sana makatulong ito!
Alalahanin ang Payette Forward,
David P.