En vän till mig kontaktade mig nyligen för att be om hjälp med en WordPress-webbplats som han hade byggt med X-temat. Hans klient hade ringt honom den morgonen efter att han märkte att hans webbplats inte visades korrekt på hans iPhone. Nick kollade upp det själv, och visst, den vackra responsiva designen han designade fungerade inte längre.
Han blev ytterligare förbryllad över det faktum att när han ändrade storleken på sitt webbläsarfönster på sitt skrivbord var sajten responsiv, men på hans iPhone visades bara skrivbordsversionen. Varför skulle en webbplats vara responsiv på en stationär dator och icke-responsiv på en mobil enhet?
Why Responsive Design Doesn't Work
Responsiv design slutar fungera när en kodrad saknas i huvudet på en HTML-fil. Om denna enstaka kodrad saknas kommer din iPhone, Android och andra mobila enheter att anta att webbplatsen du tittar på är en datorwebbplats i full storlek och justerar storleken på viewportför att omfatta hela skärmen.
Vad menar du med Viewport och Viewports storlek?
På alla enheter hänvisar storleken på visningsporten till storleken på området på en webbsida som för närvarande är synlig för användaren. Föreställ dig att du håller en iPhone 5 med en bredd på 320 pixlar. Om inte annat uttryckligen anges, antar iPhones att varje webbplats du besöker är en stationär webbplats med en bredd på 980px.
Nu, med din imaginära iPhone 5, besöker du en webbplats designad för stationära datorer som är 800px bred. Den har ingen responsiv layout, så din iPhone visar skrivbordsversionen i full bredd.
Nej det är det inte. Med visningsportstorlek kan skalning vara involverad. iPhone måste zooma ut för att se webbsidans version i full bredd. Kom ihåg att viewport hänvisar till området på en sida som för närvarande är synligt för användaren. Ser iPhone-användaren för närvarande bara 320 pixlar av sidan, eller ser de fullbreddsversionen?
Det stämmer: De ser webbsidan i full bredd på sin skärm eftersom iPhone har antagit att det är standardbeteende: Den har zoomats ut så att användaren kan se en webbsida upp till en bredd på 980 pixlar. Därför är iPhones visningsport 980px.
När du zoomar in eller ut ändras visningsportens storlek. Vi sa tidigare att vår imaginära webbplats har en bredd på 800px, så om du skulle zooma in din iPhone så att kanterna på webbplatsen rörde kanterna på din iPhones skärm, skulle visningsporten vara 800px. iPhone kan ha en viewport på 320px på en stationär webbplats, men om den gjorde det skulle du bara se en liten del av den.
Min responsiva webbplats är trasig. Hur fixar jag det?
Svaret är en enda rad HTML som när den infogas i rubriken på en webbsida säger åt enheten att ställa in visningsporten till sin egen bredd (320px för en iPhone 5) och inte skala (eller zooma) sidan.
För en mer teknisk diskussion om alla alternativ relaterade till denna metatagg, kolla in den här artikeln på tutsplus.com.
Hur fixar du WordPress X-tema när det inte är responsivt
Tillbaka till min vän från förr: Denna ena kodrad försvann när han uppdaterade X-temat. När du fixar ditt, kom ihåg att X-temat inte bara använder en rubrikfil – det använder olika rubrikfiler för varje stack, så du måste redigera din.
Eftersom Nick använder Ethos-stacken av X-temat, var han tvungen att lägga till kodrad som jag nämnde tidigare till rubrikfilen som fanns i x /frameworks/views/ethos/wp-header.php. Om du använder en annan stack, byt ut namnet på din stack (Integrity, Renew, etc.) mot 'etos' för att hitta rätt rubrikfil. Infoga den där raden, och voila! Du är redo.
Så detta fixar mina CSS-mediefrågor också?
När du infogar den raden i rubriken på din HTML-fil kommer dina responsiva @media-frågor plötsligt börja fungera igen och den mobila versionen av din webbplats kommer att återupplivas. Tack för att du läser och jag hoppas att det hjälper!
Kom ihåg att Payette Forward, David P.
