En av mina vänner kontaktade mig nyligen för att be om hjälp med en WordPress-webbplats som han hade byggt med hjälp av X-temat. Hans klient hade ringt honom den morgonen efter att han märkte att hans webbplats inte visas korrekt på sin iPhone. Nick kollade ut det själv, och nog, den vackra responsiva designen han designade fungerade inte längre.
Han blev ytterligare mystifierad av det faktum att när han ändrade storlek på webbläsarfönstret på sitt skrivbord, sajten var lyhörd, men på sin iPhone visades bara skrivbordsversionen. Varför skulle en webbplats vara lyhörd på en stationär dator och svarar inte på en mobil enhet?
Varför Responsive Design inte fungerar
Responsiv design slutar fungera när en rad kod saknas i rubriken på en HTML-fil. Om den här enskilda raden saknas kommer din iPhone, Android och andra mobila enheter att anta att webbplatsen du tittar på är en fullstor skrivbordswebbplats och justera storleken på visningsport för att omfatta hela skärmen.
Vad menar du med visnings- och visningsstorlek?
På alla enheter avser visningsportens storlek storleken på området på en webbsida som för närvarande är synlig för användaren. Tänk dig att du håller en iPhone 5 med en bredd på 320 pixlar. Såvida inte annat uttryckligen anges antar iPhones att varje webbplats du besöker är en stationär webbplats med en bredd på 980 pixlar.
Nu använder du din imaginära iPhone 5,du besöker en webbplats designad för skrivbord som är 800 pixlar bred. Den har ingen responsiv layout, så din iPhone visar skrivbordsversionen i full bredd.
iphone 6 håller på att mörka ut
Men en iPhone 5 är bara 320 pixlar bred. Är det inte alltid storleken på visningsområdet?
Nej det är det inte. Med visningsstorlek, skalning kan vara inblandad . IPhone måste zooma ut för att se versionen av webbsidan i full bredd. Kom ihåg att viewport hänvisar till området på en sida som för närvarande är synlig för användaren. Ser iPhone-användaren för närvarande bara 320 pixlar av sidan, eller ser de versionen i full bredd?
Det stämmer: De ser webbsidan i full bredd på sin skärm eftersom iPhone har antagit att det är standardbeteende: Den har zoomat ut så att användaren kan se en webbsida upp till en bredd på 980 pixlar. Därför är iPhone: s visningsport 980 pixlar.
När du zoomar in eller ut ändras visningsstorleken. Vi sa tidigare att vår imaginära webbplats har en bredd på 800 pixlar, så om du skulle zooma in din iPhone så att kanterna på webbplatsen rör vid kanterna på din iPhone-skärm, skulle visningsområdet vara 800 pixlar. IPhone burk har en visningsport på 320 pixlar på en stationär webbplats, men om den gjorde det skulle du bara se en liten del av den.
varför säger min iphone 7 ingen tjänst
Min responsiva webbplats är trasig. Hur fixar jag det?
Svaret är en enstaka rad HTML som när den infogas i sidhuvudet på en webbsida ber enheten att ställa in visningsområdet till sin egen bredd (320 pixlar när det gäller en iPhone 5) och inte att 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 .
Så här fixar du WordPress X-tema när det inte är lyhört
Tillbaka till min vän från tidigare: Den här raden kod försvann när han uppdaterade X-temat. När du fixar din, kom ihåg att X-temat inte bara använder en rubrikfil - den använder olika rubrikfiler för varje stack, så du måste redigera din.
alla mina iPhone -appar fortsätter att krascha
Eftersom Nick använder Ethos-stacken med X-tema, var han tvungen att lägga till kodrad som jag nämnde tidigare i rubrikfilen som var belägen i x /framverk / visningar / etiketter / wp-header.php . Om du använder en annan stack ersätter du namnet på din stack (Integrity, Renew, etc.) för 'ethos' för att hitta rätt rubrikfil. Sätt in den ena raden och voila! Du är bra att gå.
Så det fixar också mina CSS-mediefrågor?
När du sätter in den raden i rubriken på din HTML-fil kommer dina responsiva @media-frågor plötsligt att börja fungera igen och mobilversionen av din webbplats kommer att återupplivas. Tack för läsningen och jag hoppas att det hjälper!
Kom ihåg att betala vidare,
David P.