Un prieten de-al meu m-a contactat recent pentru a cere ajutor cu un site WordPress pe care l-a construit folosind tema X. Clientul său îl sunase în acea dimineață, după ce a observat că site-ul său web nu se afișa corect pe iPhone. Nick l-a verificat singur și, cu siguranță, frumosul design receptiv pe care l-a proiectat nu mai funcționa.
El a fost în continuare uimit de faptul că atunci când și-a redimensionat fereastra browserului de pe desktop, site-ul a fost receptiv, dar pe iPhone-ul său, a fost afișată doar versiunea desktop. De ce ar fi un site receptiv pe un computer desktop și nu răspunde la un dispozitiv mobil?
De ce nu funcționează designul receptiv
Proiectarea receptivă nu mai funcționează atunci când lipsește o linie de cod din antetul unui fișier HTML. Dacă această singură linie de cod lipsește, iPhone-ul, Android-ul și alte dispozitive mobile vor presupune că site-ul web pe care îl vizualizați este un site desktop de dimensiuni mari și va ajusta dimensiunea fereastra de vizualizare pentru a cuprinde întregul ecran.
Ce vrei să spui prin vizualizare și dimensiune vizualizare?
Pe toate dispozitivele, dimensiunea ferestrei se referă la dimensiunea zonei unei pagini web care este vizibilă în prezent utilizatorului. Imaginați-vă că dețineți un iPhone 5 cu o lățime de 320 pixeli. Cu excepția cazului în care este specificat altfel, iPhone-urile presupun că fiecare site web pe care îl vizitați este un site desktop cu o lățime de 980 px.
Acum, folosind imaginarul tău iPhone 5,vizitați un site web conceput pentru desktop, care are o lățime de 800 px. Nu are un aspect receptiv, astfel încât iPhone-ul dvs. afișează versiunea desktop pe toată lățimea.
iphone 5s se oprește singur
Dar un iPhone 5 are o lățime de doar 320 de pixeli. Nu este întotdeauna dimensiunea ferestrei de vizualizare?
Nu, nu este. Cu dimensiunea ferestrei, scalarea poate fi implicată . IPhone-ul trebuie să micșoreze pentru a vedea versiunea cu lățime completă a paginii web. Rețineți că fereastra de vizualizare se referă la zona unei pagini care este vizibilă în prezent utilizatorului. Utilizatorul iPhone vede în prezent doar 320 de pixeli din pagină sau vede versiunea cu lățime completă?
Așa este: ei văd pagina web cu lățime completă pe ecran, deoarece iPhone-ul a presupus că este comportamentul implicit: este micșorat, astfel încât utilizatorul să poată vizualiza o pagină web cu o lățime de 980 pixeli. Prin urmare, ecranul iPhone este de 980 px.
Pe măsură ce măriți sau micșorați, dimensiunea ferestrei se modifică. Am spus mai devreme că site-ul nostru imaginar are o lățime de 800 px, așa că dacă ar fi să măriți iPhone-ul astfel încât marginile site-ului web să atingă marginile afișajului iPhone-ului dvs., fereastra ar fi de 800 px. IPhone-ul poate sa aveți o fereastră de vizualizare de 320 pixeli pe un site desktop, dar dacă ar avea, veți vedea doar o mică parte din acesta.
cum să remediați problemele bateriei iPhone
Site-ul meu responsabil este rupt. Cum o rezolv?
Răspunsul este o singură linie de HTML care, atunci când este inserată în antetul unei pagini web, îi spune dispozitivului să seteze portul de vizualizare la lățimea proprie (320 px în cazul unui iPhone 5) și să nu scaleze (sau să mărească) pagina.
Pentru o discuție mai tehnică a tuturor opțiunilor legate de această metaetichetă, consultați acest articol pe tutsplus.com .
Cum să remediați tema WordPress X atunci când nu răspunde
Înapoi la prietenul meu dinainte: această linie de cod a dispărut când a actualizat tema X. Când remediați al dvs., rețineți că tema X nu folosește un singur fișier de antet - folosește fișiere de antet diferite pentru fiecare stivă, așa că va trebui să îl editați.
ecranul iPhone-ului pâlpâie după reparare
Din moment ce Nick folosește stiva Ethos a temei X, el a trebuit să adauge o linie de cod pe care am menționat-o anterior în fișierul de antet care se afla în x /frameworks/views/ethos/wp-header.php . Dacă utilizați o stivă diferită, înlocuiți numele stivei dvs. (Integritate, Reînnoire etc.) cu „ethos” pentru a găsi fișierul de antet corect. Introduceți acea linie și voila! Ești bine să pleci.
Deci, asta rezolvă interogările mele CSS Media, prea?
Când inserați acea linie în antetul fișierului HTML, interogările dvs. responsive @media vor începe brusc să funcționeze din nou și versiunea mobilă a site-ului dvs. web va reveni la viață. Mulțumesc pentru lectură și sper să vă ajute!
Nu uitați să plătiți înainte,
David P.