Prilagoditev spletnega mesta za mobilne naprave postaja vse bolj priljubljena zaradi vse večjega števila pametnih telefonov in tablic. Kaj predstavlja? Kakšne so koristi? To vprašanje je še posebej pomembno za lastnike spletnih trgovin, strani različnih storitvenih podjetij, bloge in priljubljene forume. Kako se lahko spletno mesto prilagodi mobilnim napravam? Tukaj je majhen seznam vprašanj, ki jih bomo obravnavali v članku.

Splošne informacije

Torej, za začetek si poglejmo, kaj predstavlja prilagodljivo zasnovo. To je tako imenovana konfiguracija, v kateri vse naprave pošiljajo isto kodo HTML, vendar je velikost elementov prilagojena s CSS. Različni iskalniki lahko prepoznajo takšna mesta, če so strani in viri odprti za skeniranje. Za označevanje brskalnikov za takšno priložnost se uporablja oznaka meta name = "viewport". Kaj je prilagoditev spletnega mesta za mobilne naprave?

Razmislite o oznaki

Torej se morate prepričati, da je oznaka meta name = "viewport". Zakaj je? Vsebuje navodila za brskalnik o tem, kako prilagoditi velikost in obseg strani, pri čemer je treba upoštevati širino zaslona naprave, s katere je stran gledana. Če te majhne postavke ne dodate, bo na privzeti strani prikazana računalniška stran. Hkrati pa bodo mobilni brskalniki poskušali optimizirati vsebino, kar se bo odrazilo v povečanju pisave, razširljivosti vsebine aliprikaže del vsebine, ki se prikaže na zaslonu. Je lepo Ne, mobilna različica spletnega mesta bo v tem primeru povzročila le negativno percepcijo. Konec koncev, bodo pisave nesorazmerne, bodo morali pomakniti stran in izvesti številne ukrepe, ki, čeprav so sekundarne, vendar še vedno dolgočasno. Preverite lahko prilagoditev spletnega mesta za mobilne naprave z uporabo pametnega telefona, tabličnega računalnika ali posebnih storitev in programov. Prvi dve možnosti sta seveda boljši, če pa potrebujete temeljito analizo z vidika različnih naprav in prihranite čas, bodo zadnje zadostovale.

Kakšne so prednosti prilagajanja mesta mobilnim napravam?

Uporaba tega pristopa omogoča:

uporabnikom deliti vsebino v primerih, ko imajo en naslov.

Algoritmi iskalnikov dobijo natančne parametre strani in ne zamenjajo različnih različic.

Zmanjšajte verjetnost napak.

Zaradi potrebe po ponovnem indeksiranju zmanjšajte čas prenosa.

Prihranite vire.

Poleg tega je lažje ustvariti prilagodljivo stran kot več možnosti za nekaj drugega. Prilagajanje spletnega mesta mobilni napravi (to je povsem mogoče, da to storite sami) ni nekaj zapletenega, dovolj je, da poznate javascript in delate s kaskadnimi stilskimi listi (CSS) in slikami. Obstaja veliko pristopov k nalogi. V članku bomo razpravljali o treh najbolj priljubljenih možnostih:

Poudarek na javascript.

Kombinacija.

Dinamična uporaba javascripta.

Gremopodrobneje jih obravnavajte.

Prilagoditev z uporabo javascripta

V tem primeru se uporabi ena vsebina. Z javascriptom se oblikovanje spremeni z mehanizmom delovanja strani. Vse v takih primerih je odvisno od platforme. Ta algoritem je podoben kaskadnim medijskim poizvedbam slogovne tabele. Poglejmo majhen primer dela v praksi. Torej, imamo stran s kodo HTML, ki vsebuje element

Kombinacija

V tem primeru se prilagajanje strani mobilne naprave uporabi zaradi kombinacije javascript zmožnosti in funkcij strežnika. Kako izgleda splošna shema? Uporabnik vstopi na spletno mesto iz določene naprave. javascript dobi informacije o tem, kaj je uporabil in ga pošlje strežniku. Ustvarjena je zahtevana koda, ki se nato pošlje napravi. Informacije o njem so shranjene v datotekah s piškotki. In ob naslednjem obisku strežnik natančno prebere podatke od njih. Značilnost tega pristopa je možnost uporabe različnih variant HTML kode. Res je, da je za pravilno delo potrebno poskrbeti za prisotnost naslova Vary: User-agent. Mobilna različica spletnega mesta v tem primeru zahteva malo več dela.

Dynamic javascript in druge možnosti

V tem primeru se predpostavlja, da bo ista koda opremljena z določenim elementom, ki označuje zunanjo datoteko, katere vsebina je odvisna od tega, kateri agent se uporablja. To pomeni, da bomo pred nami imeli dinamično stran. Kako se izvaja? Veliko ljudi uporablja isti Vary: User-Agent. In pri deluStrani informacije bodo poleg tega posodobljene v realnem času, kar je seveda zelo dobro. Veliko se govori o teoriji. Kako ne omenjam devic (), s katerimi lahko dobesedno "manipulirati" videz mesta in številne druge stvari. Vendar nas zanima, kako to storiti!

Priprava na izvajanje

Opozoriti je treba, da obstajata dva pristopa za izvajanje take naloge, kot je ustvarjanje prilagodljivega mesta:

Priročnik.

Samodejno.

Najprej morate izbrati pot. Da, vtičnik za prilagajanje spletnega mesta mobilnim napravam vam bo pomagal hitro opraviti vse delo. Ampak samo, če je vse ustvarjeno v skladu z določenimi, jasno urejenimi pravili. Če je bil vir ustvarjen v skladu z njim, mora program za prilagajanje mesta mobilni napravi storiti vse težave. Zaradi takšnih omejitev in včasih drugih trenutkov ter pomanjkanja popolne svobode ustvarjalnosti večina izbere ročno uglaševanje. In programi, čeprav pomagajo dobesedno v nekaj minutah, da bi dobili privlačno različico vira, vendar še vedno imajo določene slabosti.

Prilagodljiva razporeditev

Da bi dobili dobesedno "sladkarije", morate uporabiti le relativne merske enote. V praksi so vse pisave primerne pod em, velikost elementov pa je navedena kot odstotek. Čeprav je to možno od časa do časa (če res želite) in rh, vendar je bolje brez njih. Če je določena širina ali višina, je treba uporabiti fiksno določeno število 10801260ali 768 in odstotek. Primer - širina: 90%. Lahko storite tako 80% in 99% in 100%. Vse je odvisno od čarovniške želje. Kaj pa besedilo, ki se pojavi na določenem elementu? V tem primeru obstaja ena zelo dobra formula: širina pisave je razdeljena na isti indikator komponente ozadja in dobimo naš iskriv rezultat. Včasih se zgodi, da so številke zelo dolge. Na primer, standard je 1260. In uporabniki, ki imajo širino zaslona 780, pridejo noter. V delitvi bomo imeli zelo dolgo številko. Bodite prepričani, da ga obkrožite? No, tukaj je situacija zapletena. Mnogi tega ne zagovarjajo kategorično. Najbolje je pogledati na situacijo in ceniti pomembnost natančnosti. Na primer, lahko nastavite, da se upoštevajo le dve, tri, štiri ali deset decimalnih mest. Verjemite mi, to preprosto delo je tu, to prilagajanje mesta mobilnim napravam. CSS, če vsebuje vnosi brez napak, bo lahko reproduciral vse.

Prilagodljivost pisave, slik in zahteve za medije

Privzeto je velikost pisave v velikosti pisave nastavljena na 16 px. Toda, kot smo že omenili, je za nas takšen pristop zelo nezaželen. Kaj storiti v tem primeru? Potem morate razdeliti vrednost osnovnega. Poglejmo si nekaj primerov:

16/16 = 1 em.

18/16 = 1125 em.

Rezultirajoči rezultat je treba po dodajanju dvopičja zapisati v velikosti pisave. Res je, če je treba te vrednote vključiti v prihodnost nekje drugje, je treba upoštevati, da bo prikazana vrednost, ki smo jo pravkar vnesli. In zdaj za slike. Vse je mogoče narediti bodisi v njihovih atributih, bodisi v kaskadnih listih slogov zaz uporabo max-width. Ne pozabite, da je velikost označena kot odstotek! In še nekaj besed o medijskih poizvedbah. Uporabijo se lahko v primerih, ko je treba določiti določene pogoje. Na primer, če je širina zaslona manjša od 1260 slikovnih pik, veljajo pravila, vložena v zahtevo za medije. Kaj lahko storijo? Če imamo dobro sliko v ozadju, ki mora biti prikazana v celoti, in uporabnik ima majhen zaslon, lahko v takih primerih naročite, da ga očistite. Na nek način so medijske poizvedbe podobne konstrukciji if. Vendar je njihova singularnost zelo velika individualnost. Zapišejo lahko vse spremembe, ki jih je treba narediti pri delu z brskalniki določenih velikosti.

Zaključek

Število mobilnih naprav in ljudi, ki jih uporabljajo, se stalno povečuje. Zato je zelo zaželeno, da so v postavitvi mesta pred začetkom razvoja izdelali tudi najmanjše podrobnosti, da ne omenjamo konceptov. Konec koncev je potrebno zagotoviti, da uporabniki, ki se prijavijo na spletno mesto iz telefonov, ne prenašajo podatkov, ki jih ne bodo prikazali. Zakaj? No, to je elementarno - ne upočasnjuje obremenitev strani. In bolje je, da se podatki naložijo v majhnih delih, in mesto je delovalo hitro in učinkovito.