En af mine venner kontaktede mig for nylig for at bede om hjælp til et WordPress-websted, han havde bygget ved hjælp af X-temaet. Hans klient havde ringet til ham den morgen, efter at han bemærkede, at hans websted ikke blev vist korrekt på sin iPhone. Nick tjekkede det selv ud, og helt sikkert fungerede det smukke responsive design, han designede, ikke længere.
Han blev yderligere mystificeret af det faktum, at når han ændrede størrelsen på sit browservindue på sit skrivebord, webstedet var lydhør, men på hans iPhone blev kun desktopversionen vist. Hvorfor ville et websted være lydhør på en stationær computer og ikke-responsiv på en mobilenhed?
Hvorfor responsivt design ikke fungerer
Responsivt design holder op med at fungere, når der mangler en kodelinje i overskriften på en HTML-fil. Hvis denne enkelt kode kode mangler, antager din iPhone, Android og andre mobile enheder, at det websted, du ser, er et desktop-site i fuld størrelse og justerer størrelsen på visning for at omfatte hele skærmen.
Hvad mener du med visnings- og visningsstørrelse?
På alle enheder refererer visningsportens størrelse til størrelsen på området på en webside, der i øjeblikket er synligt for brugeren. Forestil dig, at du har en iPhone 5 med en bredde på 320 pixels. Medmindre andet udtrykkeligt er fortalt antager iPhones, at hvert websted, du besøger, er et desktop-websted med en bredde på 980 pixel.
Nu, ved hjælp af din imaginære iPhone 5,du besøger et websted designet til desktop, der er 800 px bredt. Det har ikke et responsivt layout, så din iPhone viser desktopversionen i fuld bredde.
kan ikke finde begrænsninger på iphone
Men en iPhone 5 er kun 320 pixels bred. Er det ikke altid størrelsen på visningen?
Nej det er ikke. Med visningsstørrelse, skalering kan være involveret . IPhone skal zoome ud for at se den fulde breddeversion af websiden. Husk, at visningsport refererer til det område på en side, der aktuelt er synlig for brugeren. Ser iPhone-brugeren i øjeblikket kun 320 pixels på siden, eller ser de versionen i fuld bredde?
Det er rigtigt: De ser websiden i fuld bredde på deres skærm, fordi iPhone har antaget, at det er standardadfærd: Det er zoomet ud, så brugeren kan se en webside op til en bredde på 980 pixels. IPhone-visningen er derfor 980 px.
Når du zoomer ind eller ud, ændres visningsstørrelsen. Vi sagde tidligere, at vores imaginære websted har en bredde på 800 pixel, så hvis du zoomer ind på din iPhone, så kanterne på hjemmesiden rører ved kanterne på din iPhone-skærm, ville visningen være 800 pixel. IPhone kan har en visning på 320 px på et desktop-websted, men hvis det gjorde det, ville du kun se en lille del af det.
hvordan man får imessage til at fungere
Mit responsive websted er brudt. Hvordan løser jeg det?
Svaret er en enkelt HTML-linje, der, når den indsættes i overskriften på en webside, fortæller enheden at indstille visningsporten til sin egen bredde (320 px i tilfælde af en iPhone 5) og ikke skalere (eller zoome) siden.
For en mere teknisk diskussion af alle de muligheder, der er relateret til dette metatag, skal du tjekke ud denne artikel på tutsplus.com .
Sådan løses WordPress X-tema, når det ikke er lydhørt
Tilbage til min ven fra før: Denne ene linje kode forsvandt, da han opdaterede X-temaet. Når du retter din, skal du huske på, at X-temaet ikke kun bruger en headerfil - det bruger forskellige headerfiler til hver stak, så du bliver nødt til at redigere din.
hvad kan jeg gøre, hvis min iphone ikke oplader
Da Nick bruger Ethos-stakken med X-temaet, måtte han tilføje en kodelinje, som jeg nævnte før, til headerfilen, der var placeret i x /frameworks/views/ethos/wp-header.php . Hvis du bruger en anden stak, skal du erstatte navnet på din stak (Integritet, Forny osv.) Med 'ethos' for at finde den rigtige headerfil. Indsæt den ene linje, og voila! Du er god at gå.
Så dette løser også mine CSS-medieforespørgsler?
Når du indsætter den linje i overskriften på din HTML-fil, begynder dine lydhøre @media-forespørgsler pludselig at arbejde igen, og den mobile version af dit websted springer tilbage til livet. Tak for læsningen, og jeg håber, det hjælper!
Husk at videresende Payette,
David P.