Een vriend van me heeft onlangs contact met me opgenomen om hulp te vragen bij een WordPress-site die hij met het X-thema had gebouwd. Zijn cliënt had hem die ochtend gebeld nadat hij had opgemerkt dat zijn website niet correct werd weergegeven op zijn iPhone. Nick controleerde het zelf, en ja hoor, het prachtige responsieve ontwerp dat hij ontwierp werkte niet meer.
Hij was verder verbijsterd door het feit dat toen hij het formaat van zijn browservenster op zijn bureaublad aanpaste, de site was responsive, maar op zijn iPhone werd alleen de desktopversie weergegeven. Waarom zou een site zijn reageert op een desktopcomputer en reageert niet op een mobiel apparaat?
Waarom responsief ontwerp niet werkt
Responsief ontwerp stopt met werken wanneer een regel code ontbreekt in de koptekst van een HTML-bestand. Als deze enkele regel code ontbreekt, gaan uw iPhone, Android en andere mobiele apparaten ervan uit dat de website die u bekijkt een desktopsite van volledige grootte is en past u de grootte van de uitkijk postje om het hele scherm te beslaan.
Wat bedoel je met viewport en viewport-grootte?
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 met een breedte van 320 pixels vasthoudt. Tenzij expliciet anders aangegeven, gaan iPhones ervan uit dat elke website die u bezoekt een desktopsite is met een breedte van 980px.
Gebruik nu uw denkbeeldige iPhone 5,u bezoekt een website die is ontworpen voor desktop en die 800px breed is. Het heeft geen responsieve lay-out, dus uw iPhone geeft de desktopversie op volledige breedte weer.
gmail op ipad werkt niet
Maar een iPhone 5 is slechts 320 pixels breed. Is dat niet altijd de grootte van de viewport?
Nee dat is het niet. Met viewport-grootte, schaalvergroting kan hierbij betrokken zijn . De iPhone moet uitzoomen om de volledige versie van de webpagina te zien. Onthoud dat viewport verwijst naar het gebied van een pagina dat momenteel zichtbaar is voor de gebruiker. Ziet de iPhone-gebruiker momenteel slechts 320 pixels van de pagina, of zien ze de versie op volledige breedte?
Dat klopt: ze zien de webpagina over de volledige breedte op hun scherm omdat de iPhone heeft aangenomen dat dit het standaardgedrag is: 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 eerder dat onze denkbeeldige website een breedte heeft van 800 px, dus als je je iPhone zou inzoomen zodat de randen van de website de randen van het scherm van je iPhone zouden raken, zou de viewport 800 px zijn. De iphone kan hebben een viewport van 320px op een desktopsite, maar als dat het geval was, zou je er maar een klein deel van zien.
iphone 7 zwart scherm na laten vallen
Mijn responsieve website is kapot. 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 om de pagina te schalen (of in te zoomen).
Voor een meer technische bespreking van alle opties met betrekking tot deze metatag, ga je naar dit artikel op tutsplus.com .
Hoe 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 oplossen van de uwe rekening mee dat het X-thema niet slechts één koptekstbestand gebruikt, maar verschillende koptekstbestanden voor elke stapel, dus u moet de uwe bewerken.
gegevens werken niet op telefoon
Omdat Nick het Ethos-stack van X-thema gebruikt, moest hij een regel code die ik eerder noemde toevoegen aan het header-bestand dat zich in x bevond /frameworks/views/ethos/wp-header.php . Als u een andere stapel gebruikt, vervangt u de naam van uw stapel (Integrity, Renew, etc.) door ‘ethos’ om het juiste headerbestand 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-queries 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 om Payette Forward,
David P.