Kāds mans draugs nesen sazinājās ar mani, lai lūgtu palīdzību saistībā ar WordPress vietni, kuru viņš bija izveidojis, izmantojot X motīvu. Viņa klients bija viņam piezvanījis tajā rītā pēc tam, kad viņš pamanīja, ka viņa vietne iPhone tālrunī netiek rādīta pareizi. Niks pats to pārbaudīja, un viņa izstrādātais skaistais, atsaucīgais dizains vairs nedarbojās.
Viņu vēl vairāk mulsināja fakts, ka, mainot pārlūkprogrammas loga izmēru uz darbvirsmas, vietne bija atsaucīga, bet viņa iPhone tālrunī tika parādīta tikai darbvirsmas versija. Kāpēc vietnei būtu jābūt adaptīvai galddatorā un nereaģējošai mobilajā ierīcē?
Kāpēc atsaucīgs dizains nedarbojas
Adaptīvais dizains pārstāj darboties, ja HTML faila galvenē trūkst vienas koda rindiņas. Ja trūkst šīs vienas koda rindiņas, jūsu iPhone, Android un citas mobilās ierīces pieņems, ka jūsu skatītā vietne ir pilna izmēra darbvirsmas vietne, un pielāgos viewport lielumu. , lai aptvertu visu ekrānu.
Ko jūs domājat ar skata logu un skata loga lielumu?
Visās ierīcēs skata loga lielums attiecas uz tīmekļa lapas apgabala lielumu, kas pašlaik ir redzams lietotājam. Iedomājieties, ka jūs turat iPhone 5, kura platums ir 320 pikseļi. Ja vien nav skaidri norādīts citādi, iPhone tālruņos tiek pieņemts, ka katra jūsu apmeklētā vietne ir darbvirsmas vietne, kuras platums ir 980 pikseļi.
Tagad, izmantojot savu iedomāto iPhone 5, jūs apmeklējat vietni, kas paredzēta darbvirsmai un kuras platums ir 800 pikseļi. Tam nav adaptīva izkārtojuma, tāpēc jūsu iPhone tālrunī tiek rādīta pilna platuma darbvirsmas versija.
Nē, tas nav. Izmantojot skata loga izmēru, var tikt iesaistīta mērogošana. Lai redzētu tīmekļa lapas pilna platuma versiju, iPhone tālrunim ir jātālina. Atcerieties, ka skatvieta attiecas uz lapas apgabalu, kas pašlaik ir redzams lietotājam. Vai iPhone lietotājs šobrīd redz tikai 320 lapas pikseļus, vai arī viņi redz pilna platuma versiju?
Tieši tā: viņi savā displejā redz pilna platuma tīmekļa lapu, jo iPhone ir pieņēmis to pēc noklusējuma: tā ir tālināta, lai lietotājs varētu skatīt tīmekļa lapu, kuras platums nepārsniedz 980 pikseļus. Tāpēc iPhone skata logs ir 980 pikseļi.
Tuvinot vai tālinot, skata loga lielums mainās. Mēs jau iepriekš teicām, ka mūsu iedomātās vietnes platums ir 800 pikseļi, tādēļ, ja vēlaties tuvināt savu iPhone tālruni tā, lai vietnes malas pieskartos jūsu iPhone displeja malām, skata logs būtu 800 pikseļi. IPhone darbvirsmas vietnē var būt 320 pikseļu skata logs, taču, ja tā būtu, jūs redzētu tikai nelielu tā daļu.
Mana atsaucīgā vietne ir bojāta. Kā to novērst?
Atbilde ir viena HTML rindiņa, kas, ievietojot tīmekļa lapas galvenē, liek ierīcei iestatīt skatvietas platumu (320 pikseļi iPhone 5 gadījumā), nevis mērogot. (vai pietuviniet) lapu.
Lai iegūtu tehniskāku diskusiju par visām opcijām, kas saistītas ar šo metatagu, skatiet šo rakstu vietnē tutsplus.com.
Kā labot WordPress X motīvu, ja tas nereaģē
Atpakaļ pie mana iepriekšējā drauga: šī viena koda rindiņa pazuda, kad viņš atjaunināja X motīvu. Labojot savu, ņemiet vērā, ka X motīvam netiek izmantots tikai viens galvenes fails — tas izmanto dažādus galvenes failus katrai steka, tāpēc jums būs jārediģē savējais.
Tā kā Niks izmanto X motīvu Ethos steku, viņam galvenes failam, kas atradās mapē x /frameworks/views/ethos/wp-header, bija jāpievieno koda rindiņa, kuru es minēju iepriekš.php . Ja izmantojat citu steku, aizstājiet ar savu steka nosaukumu (Integrity, Renew utt.) ar vārdu “ethos”, lai atrastu pareizo galvenes failu. Ievietojiet šo vienu rindiņu, un voila! Viss ir kārtībā.
Tātad ar šo tiek novērsti arī mani CSS multivides vaicājumi?
Ievietojot šo rindiņu sava HTML faila galvenē, jūsu adaptīvie @media vaicājumi pēkšņi atsāks darboties un jūsu vietnes mobilā versija atdzīvosies. Paldies, ka izlasījāt, un es ceru, ka tas palīdz!
Atcerieties Payette Forward, David P.
