Share
Jeg husker min jomfrureise i responsivt webdesign; Jeg hadde brukt et klassisk rutenett, brytet med et fleksibelt layout, og håndterte medieforespørsler for første gang. Å strekke og krympe nettleservinduet resulterte i et tilfredsstillende syn på mitt design som responderte på omgivelsene. Så prøvde jeg det på en mobil. Det virket ikke - jeg så på en nedkrympet versjon av fullskjermdesignet. Løsningen, som det viste seg, var enkel ...
Merk: Denne opplæringen ble først publisert i februar 2012, men den brukes ofte som en referanse i andre opplæringsprogrammer (og ting har endret seg), så jeg følte det berettiget en oppdatering.
Denne opplæringen vil lære deg om å bruke Viewport Meta Tag selv, men hvis du trenger hjelp med å skape et responsivt nettsted, er det mange designere som kan hjelpe deg på Envato Studio. Her er noen av de beste alternativene:
Denne leverandøren fra Storbritannia vil skape et tilpasset webdesign og utvikling basert på merkevarebygging, farger, funksjonalitetskrav og beste brukervennlighet. Nettstedet ditt vil være unikt for din bedrift og sette opp for maksimal konvertering.
Du vil få:
Hvis du selv kan håndtere utviklingen og bare ønsker et design, kan du velge dette alternativet, som gir deg et nettsted designet på en profesjonell måte. Her er hva du får:
Denne leverandøren er en heltid freelance webdesigner, med over 12 års yrkeserfaring innen Web Design, Grafisk Design og UI / UX User Interface Design.
Du får en elegant nettside som er designet med responsiv oppførsel i tankene.
Hvis ingen av disse alternativene er for deg, eller hvis du heller vil lære å gjøre det selv, les videre for instruksjonene.
Hvis du ikke leser noe annet i dette innlegget, ta en bit råd: Hvis du designer fleksibelt, bruk visningsport metataggen i din . I sin grunnleggende form, vil det sette deg opp for kryss-enhet layout fred i sinnet:
La oss bruke et eksempel layout jeg har pisket sammen. Ta en titt; Du vil se at den krympes og vokser når du endrer størrelsen på nettleseren din. Det er også en enkelt medieforespørsel som gjør teksten større og gir overskriften en lys # ff333e farge på bredere skjermer. Herlig.
Slik ser det ut i OSX Chrome:
Og her er hvordan det ser ut når nettleservinduet er slått ut:
La oss nå se hvordan det ser ut på en smarttelefon (i dette tilfellet iOS Safari på en iPhone 4):
Det første du vil legge merke til er den røde overskriften; en død gave at vi ikke ser på det smale oppsettet som vi forventer. Vi ser faktisk på en utvidet utgave.
iOS Safari forutsetter at en nettside er 980px bred og zoome ut for å passe mye i den tilgjengelige (iPhone 4) 320px. Innholdet er så mye mindre lesbart, med mindre du zoomer inn.
Som de sier, er antagelsen mor til alle ... noe, men det er akkurat hva mobile nettlesere må gjøre hvis du ikke spesifikt instruerer dem. Når du besøker et nettsted via en mobilnettleser, antar du at du ser en stor desktopopplevelse og at du vil se alt, ikke bare øverst til venstre. Det vil derfor sette visningsportbredden på (i tilfelle av iOS Safari) 980px, sko-horning alt inn i den lille skjermen.
Skriv inn visnings-metatagget, introdusert av Apple, og deretter vedtatt og videreutviklet av andre.
Det ser slik ut:
Innen content = "" du kan legge inn en last av kommaavgrensede verdier, men vi skal fokusere på de grunnleggende for nå.
For eksempel, hvis din mobile design er hensiktsmessig lagt ut på 320px, kan du spesifisere visningsportbredden:
For fleksible oppsett er det mer praktisk å basere visningsbredden på den aktuelle enheten, slik at du passer til layoutbredden til enhetens bredde du vil skrive inn:
For å være ekstra sikker på at layoutet ditt vil vises som du hadde tenkt det, kan du også stille inn zoomnivået. Dette, for eksempel:
... vil sørge for at oppsettet ditt ved åpning vises riktig på skalaen 1: 1. Ingen zooming blir brukt. Du kan til og med gå videre og forhindre at du zoomer av brukeren:
Merk: Før du bruker parameteren for maksimal skala, bør du vurdere om du egentlig burde hindre brukerne i å zoome inn. Kan de lese alt så godt som mulig?
Ved å bruke visnings-metakoden kan feil måte hindre brukere med visuelle problemer med å få tilgang til nettstedet ditt
- Tilgjengelighetsprosjektet
Disse verdiene sammen gir oss en god standard for å jobbe med:
La oss se hvordan det påvirker vårt eksempel
Som du ser, forblir alt i riktig skala. Teksten er innpakning i stedet for å krympe, og vår visuelle hjelper (den røde overskriften) har forsvunnet.
Hat tips til Jason for å peke ut dette i kommentarene. Ved å si at bredden på oppsettet ditt er lik enhetens bredde, kommer du til problemer når en enhet brukes i landskapet. Ta en titt på hvordan en iPhone 4 håndterer vår demo, i landskapet:
Nettleseren føler seg tvunget til å zoome inn for å matche bredden på siden.
For å komme seg rundt dette kan vi, som Jason påpeker, bruke JavaScript til å betinget velge hvilke metatagattributter som skal gå med, men den enkleste løsningen ser ut til å være rett og slett å ignorere bredde helt. Ved å bare sette inn initial-skala bredden er utledet. Slik viser vår nye, forenklede demo i landskapet:
Viewport metatag var Apples løsning på problemet. Det ble vedtatt raskt av andre plattformer, men det ble aldri fremført av W3C. Microsoft brakte dette til lys da de valgte for IE10 å ignorere visningsporten metatag under visse omstendigheter. I stedet valgte de å bruke CSS Device Adaptation, som er hva W3C lner seg på.
Kort sagt, lignende viewport-egenskaper er definert innenfor CSS ved hjelp av @viewport-regelen, i stedet for i HTML-koden.
@viewport zoom: 1.0; Bredde: Enhetsbredde;
Eller i henhold til vår nyere Ikke spesifiser enhetens bredde tilnærming, kunne vi sette følgende:
@viewport zoom: 1.0; bredde: utvide-til-zoom;
Gitt at det er et pågående arbeid, krever IE10 den forhåndsdefinerte versjonen av forslaget, noe som ser slik ut:
@ -ms-viewport width: extend-to-zoom; zoom: 1.0;
Det er en langt mer elegant løsning enn metatag, men er langt fra å være fullt støttet. Slå den inn i CSS nå, for å sørge for at din responsive design oppfører deg i IE10 "snap-modus", og hold øye med fremdriften i fremtiden. Dette er hvor viewport kontrollen er ledet.
Du kan lese mer om dette i Tim Kadlecs innlegg IE10 Snap Mode og Responsive Design.
Responsive webdesign er ikke bare for folk som liker å se på sine nettlesere, vokser og krymper, det handler om catering for så mange forskjellige enheter, skjermer og oppløsninger som mulig! Kast visningsmeta-taggen til din , pluss @viewport-regelen i CSS når du bygger fleksible layouter, og du er god til å gå.
Du kan også finne tusenvis av responsive temaer og maler av høy kvalitet på ThemeForest, og et stort utvalg av skript, plugins og add-ons i kategorien "responsive" på CodeCanyon.
Accentsconagua