Prilagodba web mjesta za mobilne uređaje: podrobna uputa. Verzija mobilnog web mjesta

Mobilna prilagodba web mjesta postaje sve popularnija zbog povećanja broja pametnih telefona i tableta. Što je to? Koje prednosti daju? Pogotovo je ovo pitanje relevantno za vlasnike internetskih trgovina, web stranice različitih servisnih tvrtki, blogova i popularnih foruma. Kako se web mjesto može prilagoditi za mobilne uređaje? Evo kratkog popisa problema koji ćemo razmotriti u okviru članka.

Opće informacije

Zato najprije razmislimo o čemu se radi prilagodljiv dizajn. Ovo je naziv konfiguracije u kojoj se šalje isti HTML kôd na sve uređaje, ali CSS prilagođava veličinu elemenata. Različiti roboti za pretraživanje mogu prepoznati takva mjesta, pod uvjetom da su stranice i resursi otvoreni za skeniranje. Da bi se pregledala preglednici ove mogućnosti, koristi se oznaka meta imena: "viewport". Koja je prilagodba web mjesta za mobilne uređaje?

Razmotrite oznaku

Dakle, morate biti sigurni da je oznaka meta oznaka "viewport". Za što? Sadrži upute za preglednik o tome kako prilagoditi veličinu i ljestvicu stranice, uzimajući u obzir širinu zaslona uređaja s kojeg se pregledava stranica. Ako ne dodate taj mali element, zadana stranica bit će stranica koja je namijenjena računalima. No, dok mobilni preglednici će pokušati optimizirati sadržaj, što će rezultirati povećanjem fonta, skalabilan sadržaj ili prikaz sadržaja koji stane na zaslon. Je li to ugodno? Ne, mobilna verzija web-lokacije u ovom slučaju uzrokovat će samo negativnu percepciju. Uostalom, fontovi će biti nerazmjerni, morat ćete se kretati po stranici i izvršiti niz akcija koje, iako su sekundarne, i dalje su dosadne. Provjerite prilagodbu web-lokacije za mobilne uređaje pomoću pametnog telefona, tableta ili posebnih usluga i programa. Naravno, prve dvije mogućnosti su više preferirane, ali ako vam treba pažljiva analiza s položaja različitih uređaja i uštedjeti vrijeme, onda će potonji učiniti.

Koje su prednosti prilagodbe web mjesta za mobilne uređaje?

Koristeći ovaj pristup dopušta se:

1. Korisnici dijele sadržaj u slučajevima gdje ima jednu adresu.
2. Algoritmi tražilice postižu točne parametre stranice, ne postoji zbunjenost s različitim verzijama.
3. Smanjite vjerojatnost pogrešaka.
4. Smanjite vrijeme preuzimanja zbog nedostatka ponovnog indeksiranja.
5. Spasi resurse.

Osim toga, prilagodljivu stranicu lakše je izraditi, umjesto nekoliko inačica nečega. Prilagođavanje stranice za mobilne uređaje (za to je sasvim moguće) nije nešto teško znati jаvascript je dovoljno i mogućnosti da rade sa Cascading Style Sheets (CSS) i slika. Postoje mnogi pristupi ostvarenju zadatka. U okviru članka razmatrat će se tri najpopularnije varijante:

1. Usredotočite se na jаvascript.
2. Kombinirajući.
3. Dinamička upotreba jаvascript-a.

Razmotrimo ih detaljnije.

Prilagodba pomoću jаvascript

U ovom se slučaju koristi jedan sadržaj. I pomoću jаvascript, oblikovanje se mijenja s mehanizmom stranice. Sve u takvim slučajevima ovisi o platformi. Ovaj je algoritam sličan medijskim uputama za kaskadni stilski list. Razmislite o malom primjeru rada u praksi. Dakle, imamo stranicu s HTML kodom u kojem je element postavljen

kombinacija

U ovom slučaju prilagodba web mjesta za mobilne uređaje koristi se kombinacijom mogućnosti jаvascript i funkcija poslužitelja. Što izgleda opća shema? Korisnik posjećuje web lokaciju s određenog uređaja. jаvascript dobiva informacije o tome što se koristi i prosljeđuje je na poslužitelj. On generira potrebni kôd koji se zatim šalje uređaju. A informacije o tome pohranjene su u kolačićima. A u sljedećem posjetu poslužitelj čita podatke od njih. Posebnost ovog pristupa je mogućnost korištenja različitih inačica HTML koda. Međutim, za pravilno rukovanje potrebno je voditi brigu o prisutnosti zaglavlja Vary: User-agent. Mobilna verzija stranice u ovom slučaju zahtijeva malo više rada.

Dinamički jаvascript i druge opcije

U tom slučaju, predviđeno je da će se isporučiti isti kôd s navedenim elementom koji označava vanjsku datoteku čiji sadržaj ovisi o tome koji se agent koristi. Naime, imat ćemo dinamičnu stranicu ispred nas. Kako se to ostvaruje? Mnogi ljudi koriste isti Vary: User-agent za to. A kada radite s stranicama, informacije će se ažurirati iu stvarnom vremenu, što je svakako vrlo dobro. Na teoriji još uvijek možete razgovarati puno. Kako se ne sjećati dive (

Priprema za provedbu

Treba napomenuti da postoje dva pristupa zadatku stvaranja prilagodljivog mjesta:

1. Ručno.
2. Automatski.

U početku je potrebno odabrati način kretanja. Dakle, dodatak za prilagodbu web lokacije za mobilne uređaje pomoći će da brzo izvede sav posao. Ali samo u slučaju da se sve stvori prema određenim, jasno reguliranim pravilima. Ako je resurs izrađen prema njima, program prilagodbe web mjesta za mobilni uređaj mora obaviti sve probleme. Zbog takvih ograničenja, a ponekad i drugih trenutaka i nedostatka pune slobode kreativnosti, većina se bavi priručnim ugađanjem. Program, iako doslovce pomaže u nekoliko minuta da dobije atraktivnu verziju resursa, ali i dalje imaju određene nedostatke.

Fleksibilni izgled

Da bismo izašli iz doslovnog "bombona", trebamo koristiti samo relativne mjerne jedinice. U praksi, fontovi su svi prilagođeni da em, a veličina elemenata je navedena u postotcima. Iako možete periodički (ako zaista želite) koristiti i px, ali je bolje bez njih. Prilikom određivanja širine ili visine, trebali biste upotrijebiti fiksni fiksni broj poput 1080, 1260 ili 768 i postotak. Kao primjer - širina: 90%. Možete napraviti i 80%, 99% i 100%. Sve ovisi o želji gospodara. Ali što je s tekstom koji se pojavljuje na određenom elementu? U ovom slučaju, postoji jedna vrlo dobra formula: širina fonta podijeljena je s istim faktorom komponente u pozadini, a mi dobivamo našu tvrdnju. Ponekad se događa da brojevi mogu biti vrlo dugi. Na primjer, standard je 1260. I korisnici koji imaju širinu zaslona od 780 dolaze u. Kada se dijeli, dobivamo vrlo dug broj. Je li potrebno okrugli? Pa, situacija ovdje je složena. Mnogi ne kategoriziraju savjet. Bolje je pogledati situaciju i ocijeniti koliko je točna točnost. Možete, na primjer, postaviti da uzme u obzir samo dva, tri, četiri ili deset decimalnih mjesta. Vjerujte mi, ovo je jednostavan posao, ta prilagodba web mjesta za mobilne uređaje. CSS, ako sadrži unose bez pogrešaka, može reproducirati sve.

Fleksibilni fontovi, slike i medijski upiti

Prema zadanim postavkama, u preglednicima je veličina fonta postavljena na 16 px. Ali, kao što je ranije rečeno, taj pristup nam je jako nepoželjan. Što učiniti u ovom slučaju? Zatim podijelimo traženu vrijednost osnovnom. Razmotrite nekoliko primjera:

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

Rezultat bi trebao biti napisan u veličini fonta, dodajući nakon debelog crijeva. Međutim, ako su te vrijednosti naknadno uključene na drugom mjestu, treba imati na umu da će vrijednost koju smo unijeli biti prikazana.

A sada o slikama. Sve možete dodati svojim atributima ili kaskadnom stilu pomoću maksimalne širine. Nemojte zaboraviti da je veličina dana u postocima! I nekoliko riječi o medijskim pitanjima. Oni se mogu koristiti u tim slučajevima kada je potrebno staviti određene uvjete. Na primjer, ako je širina zaslona manja od 1260 piksela, primijenit će se pravila ugniježđena u upitu za medije. Što mogu učiniti? Ako imamo prekrasnu pozadinsku sliku, koju treba prikazati u potpunosti, a korisnik ima mali zaslon, u takvim slučajevima možete odrediti da je uklonjen. Na neki način, medijski upiti nalikuju se na if izjavu. Ali njihova osobitost je vrlo velika - individualnost. Oni mogu snimiti sve promjene koje treba napraviti prilikom rada s preglednicima određenih veličina.

zaključak

Broj mobilnih uređaja i ljudi koji ih koriste stalno raste. Stoga je vrlo poželjno da se u izgledu stranice, čak i najmanji detalji, da ne spominjemo koncepte, razrađeni prije razvoja web mjesta. Uostalom, potrebno je osigurati da korisnici koji ulaze na web mjesto s telefona ne preuzimaju podatke da se neće prikazati. Zašto? Pa, to je osnovno - ne usporiti stranice učitavanja. I bolje je osigurati da se podaci učitavaju u malim dijelovima, a sam web-lokacija radi brzo i učinkovito.