Adaptatioun vum Site fir mobilen Apparater: Schrëtt fir Schrëtt Uweisungen. Mobile Websäit

D'Handy Adaptatioun vum Site ass ëmmer méi beléift wéinst der waarden Zuel vu Smartphones an Pëllen. Wat ass et? Wat sinn d'Virdeeler? Virun allem ass dëser Fro tatsächlech fir Besëtzer vun online Geschäfter an Websäite vun verschiddenen Service Firmen, Blogs an populär Forum. Wéi engem Site fir mobilen Apparater ze passen kann duerchgefouert ginn? Hei ass eng kuerz Lëscht vu Froen, déi am Kader vum Artikel diskutéiert ginn.

allgemeng Informatiounen

Also mer elo op wat e Bléck éischt reaktiounsfäeger Design. Sou ass d'Configuratioun an deem all Apparater fir déi selwecht HTML-Code geschéckt, mä d'Dimensioune vun der Elementer ginn duerch seng CSS. Verschidde Sich Roboteren esou Siten entdecken kann, gëtt dat d'Säiten a Ressourcen siichtbar fir Scannen. Fir de Browser fir dës Méiglechkeet ze soen, benotzen den Tag meta Numm = "viewport". Wat ass d'Adaptatioun vum Site fir mobilen Apparater?

betruecht Tag

Also muss du sécher maachen, datt sech d'Tag meta Numm = "viewport". Firwat géif hien? Dat do sinn Uweisungen un de Browser op wéi der Gréisst ze ajustéieren an d'Säit zu der Breet vun der Apparat Écran Skala, aus deenen Dir de Site Vue. Wann dir net dat klengt Element Foto, ass d'Default Säit ugewisen, fir Computeren entworf. Mä während mobilen Browser probéieren den Inhalt ze optimiséieren, déi am waarden der Schrëft, scalable Inhalt oder Kaart vun der Inhalt Resultat gëtt, dat op der Écran fit. Ass et schéin? Nee, de mobil Versioun vum Site zu sou engem Fall géif féieren nëmmen negativ Perceptioun. No all Policen gesat ginn, ass et néideg der Säit a maachen méi Zuel vun Aktiounen déi zu Minière, obwuel se kleng sinn, mä awer tedious. Check Site Adaptatioun fir mobilen Apparater, kënnt Dir Är Telefonsnummer, Tablet, oder speziell Servicer a Programmer benotzen. Natierlech, sinn déi éischt zwou Méiglechkeeten Spiller, mä wann Dir enger grëndlecher Analys vun der Perspektiv vun verschidden Apparater brauchen an Zäit ze retten, dann de Fonds fit.

Wat sinn d'Virdeeler vum Site fir mobilen Apparater Adaptatioun?

dës Approche benotzt erlaabt Iech op:

1. Benotzer Inhalt vun Fäll ze deelen wou hien eng Adress huet.
2. D'algorithms vun Sich Motore der exakt Säit Layout ze kréien, et ass Duercherneen mat de verschiddene Versiounen.
3. Reduzéieren d'Chancen vun Feeler.
4. Reduzéieren Stiwwel Zäit vun der muss du-chen, hiert eliminéiert.
5. Retten Ressourcen.

Zousätzlech, eng adaptiven Säit ze schafen einfach wéi e puer Méiglechkeeten fir eppes eent. Adaptatioun vum Site fir mobilen Apparater (maachen dat relativ méiglech ass) ass net eppes schwéier Javascript genuch an konnt wëssen, mat Kaskadespär Stil Blieder (CSS) a Biller ze schaffen. Et gi vill Approche un dës Aufgab. Als Deel vun den Artikel gëtt vun dräi vun de beléifsten Optiounen considéréiert ginn:

1. De Schwéierpunkt vun Javascript.
2. Kombinéiert.
3. Dynamic Gebrauch vun Javascript.

Loosse mer se am Detail betruecht.

Adaptatioun vun benotzt Javascript

An dësem Fall, eng eenzeg Inhalt. A mat Javascript wat Ännerungen op de Mechanismus vun Operatioun vun der Säit. Alles an deem Fall hänkt op der Plattform. Dëst Algorithmus ass ähnlech ze Medien ufroën Kaskadespär Stil Blat. Betruecht e klengt Beispill vun der Aarbecht an Praxis. Also hu mer eng Säit mat HTML-Code, deen en Element Faarwe ass . Op seng Demande wäert een an de selwechte Donnéeën weiderginn. Mee wann et zu Behandlung kënnt, muss et e groussen Impakt Apparat Performance. A wéi engem Resultat - wäert deem wat vun der Säit änneren. Als Beispill, d'Situatioun mat engem Bild dat wéi op Computeren fir den Zweck vun ukuckt et op Smartphones an Pëllen, éischter optimiséiert ginn. E wichtege Virdeel vun dëser Optioun as dass d'Ëmsetzung vun engem Computer automatesch fonnt ass. Zousätzlech, do braucht dir net eng speziell Wénkel ze kréien, well et ass keng dynamesch Inhalt Kaart.

geschéckt

An dësem Fall, benotzt d'Adaptatioun vum Site fir mobilen Apparater duerch Reconciliatioun an Javascript Fonctiounen an Server Funktiounen. Wéi heescht der allgemeng Schema? De Benotzer kënnt op Är Site vun engem bestëmmten Apparat. Javascript ass informéiert iwwer dat wat hien huet gewisen, wie, an Passë et op de Server. Et ass déi néideg Code generéiert datt dono dem Apparat geschéckt gëtt. An Informatiounen iwwer dat ass an engem Cookie Datei gespäichert. An déi nächst Zäit bei dir Server et hinnen liest. Eng Fonktioun vun dëser Approche ass d'Fähegkeet verschidde Varianten vun HTML Code ze benotzen. Allerdéngs ze schaffen richteg braucht Dir Pfleeg vun der Präsenz vun de Wénkel variéieren ze huelen: De Benotzerkont-Agent. Mobile Versioun vum Site vun enger esou Fall brauch e bësse méi Aarbechtsmaart.

Dynamic Javascript an aner Optiounen

An dësem Fall gëtt et, datt déi selwecht Code gëtt mat engem bestëmmten Element gëtt gin dass zu engem externen Fichier Punkten, ass den Inhalt vun deem je änneren op wat Agent benotzt. Dat ass virun eis eng dynamesch Säit ass. Wéi ass et ëmgesat? Vill benotzen se fir all déi selwecht variéieren: De Benotzerkont-Agent. A wann mat Säiten vun Informatiounen bewäerten och am richtege Moment aktualiséiert ginn, déi, natierlech, ganz gutt. Op der Theorie schwätzen kann nach vill. Wéi net Filmdiva zu drunn (), mat deem kanns wuertwiertlech d'Ausgesin vum Site "juggle" a vun der vill aner verschidden Saachen. Mee mir wëlle wëssen, wéi et ze maachen!

Virbereedung fir d'Ëmsetzung vun

Et soll feststellen, datt et ginn zwou Approche wou den schafen eng adaptiven Site esou Aufgaben leeschtungsfäheg:

1. Manuell.
2. Automatesch.

Ufank, muss du déi Wee ze verfollegen wielen. Also, wäert de Plug-an fir Site Adaptatioun fir mobilen Apparater der Aarbecht séier Leeschtunge. Awer nëmmen, wann all fir spezifesch ugeluecht, kloer Regelen definéiert. Wann der Ressource no hinnen geschaf gouf, fir de Site vun Erkrankung Software fir mobilen Apparater mussen all dësen erfëllen. Well vun dësen Aschränkungen, an heiansdo anere Saachen an der opgepasst voller Fräiheet vun Kreativitéit Majoritéit schaffe fir manuell änneren. A wann de Programm an Hëllef vun just e puer Minutten eng attraktiv Versioun vun der Ressource ze kréien, mä awer hunn och verschidden Nodeeler.

flexibel Layout

Fir setzt e "probéiere" ze hunn ass, Dir nëmmen relativ Unitéiten ze benotzen brauch. An der Praxis, sinn all Policen an de em seng, an der Gréisst vun der Elementer ass als Prozentsaz uginn. Obwuel vun Zäit zu Zäit, kënnt Dir (wann Dir wierklech wëllt) PI benotzen, mä et ass besser ouni hinnen ze maachen. Wann Dir der Breed (Breet) an Héicht uginn, soll net e bestëmmte fix Zuel wéi 1080, 1260 oder 768, a Prozentsaz benotzt ginn. Als Beispill - Breet: 90%. Dir kënnt a 80% maachen, an 99% an 100%. Alles hänkt op der wäert vun der Meeschtesch. Mä wat iwwer den Text, datt op e bestëmmten Objet schéngt? Fir dësem Fall ass et e ganz gutt Formule: Schrëftgréisst Breet an déi selwecht Figur Hannergrond Komponent ënnerdeelt ass, a mir kréien eise D'Fuerderung Resultater. Heiansdo et geschitt heiansdo, dass d'Zuelen ganz laang kann. Zum Beispill, de Standard - ass et 1260. An goen Benotzer mat Écran Breet 780. ass Wann Dir mir Gruef eng ganz laang Rei kréien. Ech hunn et bis Ronn? Gutt, ass d'Situatioun komplizéiert. Vill maachen ugeroden staark net un. Besser kucken nach um Situatioun an deeër wéi wichteg d'Richtegkeet ass. Dir kënnt, zum Beispill, Formatioun nëmmen zwee, dräi, véier oder zéng Dezimalzuel Plazen Rechnung ze huelen. Gleewen mech, ass dat einfach Aarbecht, dës Adaptatioun vum Site fir mobilen Apparater. CSS, wann de Rekord kee Feeler ass, kann all spillen.

Flexibilitéit Schrëftgréisst, Biller, an Medien Ufroën

Par défaut, huet d'Lokaléquipe mat Browser Schrëftgréisst op Rekord an der 16. px. Mä, wéi virdrun erwähnt, ass dës Approche ganz well fir eis. Wat an dësem Fall ze maachen? Da muss du de Wäert vun der Basis un Gruef. Als e puer Beispiller:

1. 16/16 = 1 em.
2. 18/16 = 1,125 em.

D'Resultat muss an enger Schrëftgréisst-Gréisst geschriwwe ginn, nodeems de Colon Schan. Allerdéngs, wann dës Wäerter dono anzwousch anescht Uerden sinn, sollt et am Geescht ginn dréit, datt et eis de Wäert uewen agin weisen gëtt.

Elo, mat Respekt un d'Bild. Alles kann entweder verflaacht Attributer gemaach ginn, oder Kaskadespär Stil Plack mat max-Breed. Vergiesst nët, dass der Gréisst als Prozentsaz uginn ass! An e puer méi Wierder iwwert d'Medien ufroën. Si kann an deene Fäll gebraucht ginn, wann et néideg ass bestëmmte Konditiounen Virsprong. Zum Beispill, ass wann Écran Breet manner wéi 1260 Pixel, ginn d'Regele applizéiert, an Medien Paieziedel Ënnerbewosstsinn. Wat kann se maachen? Wa mir eng schéin Hannergrond Bild gin ugewisen a voller hunn, an de Benotzer huet e klengen Ecran, an esou Fäll ass et méiglech aschreiwen, datt et geläscht gouf. An e puer Méiglechkeeten erënner vun Medien ufroën wann den Design. Mä d'Fonktioun ass ganz grouss ... Perséinlechkeet. Si kënnen all d'Ännerungen schreiwen duerchgefouert gin wou mat bestëmmte Browser gesin schaffen.

Konklusioun

D'Zuel vun de mobilen Apparater, a Leit, déi se benotzen, wiisst permanent. Also, ass et wënschenswäert, dass de Layout vun der Säit virum Ufank vu senger Entwécklung goufen och de klengsten Detailer geklappt, net d'Konzepter ze ernimmen. No all, ass et néideg ze suergen, datt Benotzer ze Site Telefon Ierch op, net erofgeluede Donnéeën datt si net ugewisen ginn. Firwat? Gutt, et ass Elementar- - sou als net de Luede vu Säiten ze lues verwandelt. An et besser ze maachen dass d'Daten a klenge Portiounen iwwerlaascht ass, an d'Site séier an effizient.