Yon zanmi m 'dènyèman kontakte m' pou mande pou èd ak yon sit WordPress li te bati lè l sèvi avèk tèm nan X. Kliyan li te rele l 'maten sa a apre li remake ke sit entènèt li pa te montre kòrèkteman sou iPhone l' yo. Nick tcheke li soti tèt li, ak asire w ase, bèl konsepsyon an reponn li te fèt pa te travay ankò.
Li te plis mistifye pa lefèt ke lè li rdimansyonman fenèt navigatè l 'sou Desktop l' yo, sit la te reponn, men sou iPhone l 'yo, se sèlman vèsyon an Desktop te parèt. Poukisa ta yon sit dwe reponn sou yon òdinatè Desktop ak ki pa reponn sou yon aparèy mobil?
Poukisa Design Responsive pa travay
Konsepsyon reponn sispann travay lè yon liy nan kòd ki manke nan header nan yon dosye HTML. Si liy sa a sèl nan kòd ki manke, iPhone ou, android, ak lòt aparèy mobil pral asime ke sit entènèt la w ap gade se yon sit gwosè plen Desktop ak ajiste gwosè a nan la Viewport pou kouvri tout ekran an.
Ki sa ou vle di pa Viewport ak Viewport Size?
Sou tout aparèy, gwosè a nan Viewport a refere a gwosè a nan zòn nan nan yon Paj Web ki se kounye a vizib nan itilizatè a. Imajine w ap kenbe yon iPhone 5 ak yon lajè 320 piksèl. Sòf si klèman di otreman, iPhones asime ke chak sit entènèt ou vizite se yon sit Desktop ki gen yon lajè 980px.
Koulye a, lè l sèvi avèk imajinè iPhone ou 5,ou vizite yon sit entènèt ki fèt pou Desktop ki se 800px lajè. Li pa gen yon Layout reponn, se konsa iPhone ou montre vèsyon an Desktop tout lajè.
iphone ploge nan pa chaje
Men, yon iPhone 5 se sèlman 320 piksèl nan lajè. Eske se pa toujou gwosè a nan Viewport la?
Non, li pa. Avèk gwosè Viewport, dekale ka patisipe . IPhone a gen pou rale pou wè vèsyon plen lajè pajwèb la. Sonje ke Viewport refere a zòn nan nan yon paj ki se kounye a vizib itilizatè a. Èske itilizatè iPhone a kounye a wè jis 320 piksèl nan paj la, oswa èske yo wè vèsyon plen lajè a?
Sa a dwat: Yo ap wè paj wèb la plen lajè sou ekspozisyon yo paske iPhone a te sipoze konpòtman default li a: Li rale pou itilizatè a te kapab wè yon paj wèb jiska yon lajè 980 piksèl. Se poutèt sa, Viewport iPhone a se 980px.
Kòm ou rale nan oswa soti, gwosè a Viewport chanje. Nou te di anvan ke sit entènèt imajinè nou an gen yon lajè 800px, kidonk si ou ta rale nan iPhone ou pou ke bor yo nan sit entènèt la te manyen bor yo nan ekspozisyon iPhone ou a, Viewport a ta dwe 800px. IPhone a kapab gen yon Viewport nan 320px sou yon sit Desktop, men si li te fè, ou ta sèlman ka wè yon ti pòsyon nan li.
5s iphone kole nan mòd kas ekoutè
Sit wèb reponn mwen an kase. Kouman pou mwen ranje li?
Repons lan se yon liy sèl nan HTML ke lè eleman nan header a nan yon paj wèb di aparèy la yo mete pòtrè a nan pwòp lajè li a (320px nan ka a nan yon iPhone 5) epi yo pa echèl (oswa rale) paj la.
Pou yon diskisyon plis teknik sou tout opsyon ki gen rapò ak meta tag sa a, tcheke deyò atik sa a sou tutsplus.com .
Ki jan yo ranje WordPress X Tèm lè li pa reponn
Retounen nan zanmi m 'ki soti nan anvan: Yon sèl liy sa a nan kòd disparèt lè li mete ajou tèm nan X. Lè w ap repare ou, kenbe nan tèt ou ke tèm nan X pa sèvi ak jis yon sèl dosye header - li itilize dosye header diferan pou chak chemine, kidonk, ou pral gen modifye ou.
iphone x ekran te vin nwa
Depi Nick sèvi ak chemine Ethos nan tèm X, li te ajoute liy kòd mwen mansyone anvan nan dosye header ki te chita nan x /frameworks/views/ethos/wp-header.php . Si ou itilize yon chemine diferan, ranplase non chemine ou (Entegrite, Renouvle, elatriye) pou 'ethos' pou jwenn dosye header ki kòrèk la. Mete yon sèl liy, ak vwala! Ou bon pou ou ale.
Se konsa, sa a ranje CSS Medya demann mwen an, twò?
Lè ou mete liy sa a nan header nan dosye HTML ou a, demann @media reponn ou yo pral toudenkou kòmanse travay ankò ak vèsyon mobil nan sit entènèt ou a pral prentan tounen nan lavi. Mèsi pou lekti e mwen espere ke li ede!
Sonje Payette Forward,
David P.