Een vriend van mij heeft onlangs contact met mij opgenomen om hulp te vragen bij een WordPress-site die hij had gebouwd met het X-thema. Zijn cliënt had hem die ochtend gebeld nadat hij merkte dat zijn website niet correct werd weergegeven op zijn iPhone. Nick heeft het zelf uitgeprobeerd, en ja hoor, het mooie responsive design dat hij ontwierp werkte niet meer.
Hij was verder verbijsterd door het feit dat toen hij het formaat van zijn browservenster op zijn desktop aanpaste, de site wel responsief was, maar op zijn iPhone alleen de desktopversie werd weergegeven. Waarom zou een site responsief zijn op een desktopcomputer en niet-responsief op een mobiel apparaat?
Waarom responsive design niet werkt
Responsive design werkt niet meer als er een regel code ontbreekt in de header van een HTML-bestand. Als deze enkele coderegel ontbreekt, gaan uw iPhone, Android en andere mobiele apparaten ervan uit dat de website die u bekijkt een desktopsite op ware grootte is en passen ze de grootte van de viewport aanom het hele scherm te omvatten.
Wat bedoel je met kijkvenster en kijkvenstergrootte?
Op alle apparaten verwijst de grootte van de viewport naar de grootte van het gebied van een webpagina dat momenteel zichtbaar is voor de gebruiker. Stel je voor dat je een iPhone 5 vasthoudt met een breedte van 320 pixels. Tenzij expliciet anders vermeld, gaan iPhones ervan uit dat elke website die u bezoekt een desktopsite is met een breedte van 980px.
Nu, met behulp van je denkbeeldige iPhone 5, bezoek je een website ontworpen voor desktop die 800px breed is. Het heeft geen responsieve lay-out, dus je iPhone geeft de volledige desktopversie weer.
Nee dat is het niet. Bij de grootte van de viewport kan schaalvergroting een rol spelen. De iPhone moet uitzoomen om de volledige breedte van de webpagina te zien. Onthoud dat viewport verwijst naar het gedeelte van een pagina dat momenteel zichtbaar is voor de gebruiker. Ziet de iPhone-gebruiker momenteel slechts 320 pixels van de pagina of ziet hij de volledige versie?
Dat klopt: ze zien de webpagina op volledige breedte op hun scherm omdat de iPhone zijn standaardgedrag heeft aangenomen: hij is uitgezoomd zodat de gebruiker een webpagina tot een breedte van 980 pixels kan bekijken. Daarom is de viewport van de iPhone 980px.
Terwijl u in- of uitzoomt, verandert de grootte van de viewport. We zeiden al eerder dat onze denkbeeldige website een breedte heeft van 800px, dus als je zou inzoomen op je iPhone zodat de randen van de website de randen van het scherm van je iPhone zouden raken, zou de viewport 800px zijn. De iPhone kan een viewport van 320px hebben op een desktopsite, maar als dat zo was, zou je er maar een klein deel van zien.
Mijn responsieve website is defect. Hoe los ik het op?
Het antwoord is een enkele regel HTML die, wanneer ingevoegd in de koptekst van een webpagina, het apparaat vertelt om de viewport in te stellen op zijn eigen breedte (320px in het geval van een iPhone 5) en niet op schaal (of zoom in) de pagina.
Voor een meer technische bespreking van alle opties met betrekking tot deze metatag, bekijk dit artikel op tutsplus.com.
Hoe het WordPress X-thema te repareren wanneer het niet reageert
Terug naar mijn vriend van vroeger: deze ene regel code verdween toen hij het X-thema bijwerkte. Houd er bij het repareren van de jouwe rekening mee dat het X-thema niet slechts één headerbestand gebruikt - het gebruikt verschillende headerbestanden voor elke stapel, dus je zult de jouwe moeten bewerken.
Aangezien Nick de Ethos-stack van het X-thema gebruikt, moest hij een coderegel toevoegen die ik eerder noemde aan het header-bestand dat zich in x /frameworks/views/ethos/wp-header bevond.php. Als je een andere stack gebruikt, vervang dan de naam van je stack (Integrity, Renew, etc.) door 'ethos' om het juiste header-bestand te vinden. Voeg die ene regel in, en voila! Je bent klaar om te gaan.
Dus dit lost ook mijn CSS-mediaquery's op?
Wanneer u die regel in de koptekst van uw HTML-bestand invoegt, beginnen uw responsieve @media-query's plotseling weer te werken en komt de mobiele versie van uw website weer tot leven. Bedankt voor het lezen en ik hoop dat het helpt!
Vergeet niet Payette Forward, David P.
