Prilagođavanje mobilnih stranica postaje sve popularnije zbog sve većeg broja pametnih telefona i tableta. Što ona predstavlja? Koje su prednosti? Ovo je pitanje posebno važno za vlasnike internetskih trgovina, web-lokacije raznih uslužnih tvrtki, blogove i popularne forume. Kako se web-lokacija može prilagoditi mobilnim uređajima? Ovdje je mali popis pitanja koje ćemo razmotriti u članku.

Opće informacije

Dakle, za početak, razmotrimo što čini adaptivni dizajn. To je tzv. Konfiguracija u kojoj svi uređaji šalju isti HTML kôd, ali je veličina stavki prilagođena CSS-u. Različiti pretraživači mogu prepoznati takve stranice, pod uvjetom da su stranice i resursi otvoreni za skeniranje. Kako bi označili preglednike za takvu mogućnost, koristi se oznaka meta name = "viewport". Što je prilagodba web-lokacije za mobilne uređaje?

Razmislite o oznaci

Dakle, morate biti sigurni da je oznaka meta name = "viewport". Zašto je on? Sadrži upute za preglednik o tome kako prilagoditi veličinu i veličinu stranice, uzimajući u obzir širinu zaslona uređaja s kojeg se stranica pregledava. Ako ne dodate tu malu stavku, zadana stranica prikazat će stranicu na računalu. Istovremeno, mobilni preglednici pokušat će optimizirati sadržaj, što će se odraziti na povećanje fontova, skalabilnost sadržaja iliprikazati dio sadržaja koji se pojavljuje na zaslonu. Je li lijepo Ne, mobilna verzija web-lokacije u ovom slučaju samo će izazvati negativnu percepciju. Uostalom, fontovi će biti neproporcionalni, morat ćete pomicati stranicu i provoditi niz radnji, koje, iako su sekundarne, ali još uvijek zamorne. Možete provjeriti prilagodbu web-lokacije za mobilne uređaje pomoću pametnog telefona, tableta ili posebnih usluga i programa. Naravno, prve dvije opcije su bolje, ali ako trebate temeljitu analizu sa stajališta različitih uređaja i uštedite vrijeme, tada će se i posljednje moći uklopiti.

Koje su prednosti prilagodbe web-lokacije mobilnim uređajima?

Korištenje ovog pristupa omogućuje:

korisnicima da dijele sadržaj u slučajevima kada imaju jednu adresu.

Algoritmi tražilica dobivaju točne parametre stranice, bez konfuzije s različitim verzijama.

Smanjite vjerojatnost pogrešaka.

Smanjite vrijeme preuzimanja zbog potrebe za ponovnim indeksiranjem.

Uštedite resurse.

Osim toga, lakše je stvoriti prilagodljivu stranicu nego nekoliko opcija za nešto drugo. Prilagođavanje web-lokacije mobilnom uređaju (sasvim je moguće i sami) nije nešto komplicirano, dovoljno je znati javascript i moći raditi s kaskadnim stilovima (CSS) i slikama. Postoji mnogo pristupa tom zadatku. U članku će se raspravljati o tri najpopularnije opcije:

Naglasak na javascriptu.

Kombinacija.

Dinamičko korištenje javascripta.

Idemorazmotrite ih detaljnije.

Prilagodba pomoću javascripta

U ovom se slučaju koristi jedan sadržaj. A s javascriptom oblikovanje se mijenja s mehanizmom rada stranice. Sve u takvim slučajevima ovisi o platformi. Ovaj je algoritam sličan kaskadnim medijskim upitima stilova. Razmotrimo mali primjer rada u praksi. Dakle, imamo stranicu s HTML kodom koja sadrži element

Kombinacija. Kako izgleda opća shema? Korisnik unosi web-lokaciju s određenog uređaja. javascript dobiva informacije o tome što je koristio i šalje ga poslužitelju. Generira se traženi kod, koji se zatim šalje uređaju. Informacije o njemu pohranjuju se u datoteke kolačića. I na sljedećem posjetu poslužitelj čita podatke točno od njih. Značajka ovog pristupa je mogućnost korištenja različitih varijanti HTML koda. Istina, za pravilan rad potrebno je voditi računa o prisutnosti naslova Vary: User-agent. Mobilna verzija web-lokacije u ovom slučaju zahtijeva malo više posla.

Dinamički javascript i druge opcije

U ovom se slučaju pretpostavlja da će isti kôd biti opremljen određenim elementom koji označava vanjsku datoteku čiji se sadržaj razlikuje ovisno o tome koji se agent koristi. To jest, imat ćemo dinamičnu stranicu prije nas. Kako se provodi? Mnogi ljudi koriste isti Vary: User-Agent. I kada raditestranica informacije dodatno će se ažurirati u realnom vremenu, što je, naravno, vrlo dobro. Mnogo se govori o teoriji. Kako da ne spominjem djevice (), s kojima možete doslovno "žonglirati" izgled stranice i mnoge druge stvari. Ali nas zanima kako to učiniti!

Priprema za provedbu

Treba napomenuti da postoje dva pristupa izvođenju takvog zadatka kao što je stvaranje prilagodljivog mjesta:

Priručnik.

Automatski.

Prvo morate odabrati koji će put ići. Da, dodatak za prilagođavanje web-lokacije mobilnim uređajima pomoći će vam da brzo obavite sav posao. Ali samo ako je sve stvoreno prema određenim, jasno reguliranim pravilima. Ako je resurs stvoren u skladu s njim, program za prilagođavanje stranice mobilnom uređaju mora učiniti sve nevolje. Zbog takvih ograničenja, a ponekad i drugih trenutaka, i nedostatka pune slobode kreativnosti, većina bira izbor u korist ručnog podešavanja. I programi, iako pomažu doslovno za nekoliko minuta da bi dobili atraktivnu verziju izvora, ali još uvijek imaju određene nedostatke.

Fleksibilan raspored

Da bismo dobili doslovno "slatkiše", morate koristiti samo relativne mjerne jedinice. U praksi se svi fontovi uklapaju pod em, a veličina elemenata označava se kao postotak. Iako je moguće s vremena na vrijeme (ako stvarno želite) i rh, ali je bolje bez njih. Kada se odredi širina ili visina, treba upotrijebiti fiksni fiksni broj od 10801260ili 768 i postotak. Kao primjer - širina: 90%. Možete učiniti i 80% i 99% i 100%. Sve ovisi o želji čarobnjaka. 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 na isti indikator komponente pozadine i dobivamo svoj iskričavi rezultat. Ponekad se dogodi da brojevi mogu biti vrlo dugi. Na primjer, standard je 1260. I korisnici koji imaju širinu zaslona od 780 ulaze. U odjeljku ćemo imati vrlo dugačak broj. Svakako ga zaobići? Pa, ovdje je situacija komplicirana. Mnogi to ne kategorički savjetuju. Najbolje je pogledati situaciju i cijeniti važnost točnosti. Možete, na primjer, postaviti samo dva, tri, četiri ili deset decimalnih mjesta. Vjerujte mi, ovaj jednostavan posao je ovdje, to je prilagođavanje stranice mobilnim uređajima. CSS, ako sadrži unose bez pogrešaka, moći će reproducirati sve.

Fleksibilnost zahtjeva za fontom, slikama i medijima

Prema zadanim je veličinama fonta veličina fonta postavljena na 16 px. Ali, kao što smo već spomenuli, za nas je takav pristup vrlo nepoželjan. Što učiniti u ovom slučaju? Tada morate podijeliti vrijednost osnovnog. Razmotrimo nekoliko primjera:

16/16 = 1 em.

18/16 = 1125 em.

Rezultirajući rezultat mora biti napisan veličinom fonta, nakon dodavanja dvotočke. Istina, ako te vrijednosti treba uključiti u budućnost negdje drugdje, treba imati na umu da će se vrijednost koju smo upravo unijeli prikazati. A sada za slike. Sve se može napraviti u njihovim atributima, ili u kaskadnom stilu zakoristeći max-width. Ne zaboravite da je veličina označena kao postotak! I još nekoliko riječi o medijskim upitima. Mogu se koristiti u slučajevima kada je potrebno postaviti određene uvjete. Na primjer, ako je širina zaslona manja od 1260 piksela, primjenjivat će se pravila uložena u zahtjev za medije. Što mogu učiniti? Ako imamo dobru pozadinsku sliku koja bi trebala biti prikazana u cijelosti, a korisnik ima mali zaslon, u takvim slučajevima, možete ga naručiti za čišćenje. Na neki način, medijski upiti nalikuju konstruktu if. Ali njihova je osobitost vrlo velika individualnost. Oni mogu snimiti sve promjene koje je potrebno napraviti pri radu 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 prije početka razvoja razradi i najsitniji detalji, da ne spominjemo koncepte. Uostalom, potrebno je osigurati da korisnici koji se prijavljuju na web-mjesto s telefona ne preuzimaju podatke koje neće biti prikazani. Zašto? Pa, to je elementarno - ne usporiti učitavanje stranica. I bolje je da se podaci učitaju u malim dijelovima, a sama stranica radila je brzo i učinkovito.