Prilagajanje spletnega mesta za mobilne naprave: navodila po korakih. Različica za mobilne naprave

Mobilna prilagoditev mesta postaja vedno bolj priljubljena zaradi povečanja števila pametnih telefonov in tabličnih računalnikov. Kaj je to? Katere prednosti daje? Še posebej to vprašanje je pomembno za lastnike spletnih trgovin, spletnih strani različnih storitvenih podjetij, blogov in priljubljenih forumov. Kako se lahko spletno mesto prilagodi za mobilne naprave? Tukaj je kratek seznam vprašanj, ki jih bomo obravnavali v okviru članka.

Splošne informacije

Torej, najprej preuči, kaj je prilagodljiv dizajn. To je ime konfiguracije, v kateri je poslana ista HTML koda vsem napravam, vendar velikost elementov prilagodi CSS. Različni iskalni roboti lahko prepoznajo takšna spletna mesta, pod pogojem, da so strani in viri odprti za skeniranje. Da bi to možnost lahko povedali brskalnikom, se uporablja meta ime oznake: »pogled na razglednico«. Kakšna je prilagoditev mesta za mobilne naprave?

Razmislite o oznaki

Torej, morate poskrbeti, da je oznaka meta ime »pogled na razglednico«. Za kaj? Vsebuje navodila za brskalnik, kako prilagajati velikost in obseg strani, pri čemer upoštevajte širino zaslona naprave, s katere si ogledate spletno mesto. Če ne dodate tega majhnega elementa, bo privzeta stran tista, ki je namenjena računalniku. Toda mobilni brskalniki bodo poskušali optimizirati vsebino, kar bo imelo za posledico povečanje pisav, razširljivost vsebine ali prikaz nekaterih vsebin, ki se vzpenjajo na zaslon. Je prijetno? Ne, mobilna različica spletnega mesta v tem primeru bo povzročila le negativno zaznavanje. Navsezadnje bodo pisave nesorazmerne, morali se boste pomikati po strani in izvedli vrsto ukrepov, ki so čeprav so sekundarni, še vedno moteči. Preverite prilagoditev mesta za mobilne naprave, lahko uporabljate pametni telefon, tablični računalnik ali posebne storitve in programe. Seveda so prvi dve možnosti bolj privlačni, vendar, če potrebujete natančno analizo s položaja različnih naprav in prihranite čas, bo slednji naredil.

Kakšne so prednosti prilagajanja mesta za mobilne naprave?

Uporaba tega pristopa omogoča:

1. Uporabniki delijo vsebino v primerih, ko ima en naslov.
2. Algoritmi iskalnika dobijo natančne parametre strani, z različnimi različicami ni zmede.
3. Zmanjšajte verjetnost napak.
4. Zmanjšajte čas prenosa zaradi pomanjkanja ponovnega indeksiranja.
5. Shranite vire.

Poleg tega je prilagodljiva stran lažje ustvarjati, ne pa več različic nečesa. Prilagajanje spletnega mesta za mobilne naprave (to je čisto mogoče storiti sami) ni nekaj zapletenega, dovolj je, da poznate jаvascript in lahko delate s kaskadnimi listi slogov (CSS) in slikami. Obstaja veliko pristopov k izpolnjevanju naloge. V okviru članka bodo upoštevane tri najbolj priljubljene različice:

1. Osredotočite se na jаvascript.
2. Kombinacija.
3. Dinamična uporaba jаvascripta.

Poglejmo jih podrobneje.

Prilagajanje z uporabo jаvascripta

V tem primeru se uporablja ena vsebina. In z uporabo jаvascript, se oblikovanje spreminja z mehanizmom strani. Vse v takih primerih je odvisno od platforme. Ta algoritem je podoben medijskim poizvedbam za kaskadni slogovni list. Upoštevajte majhen primer dela v praksi. Torej imamo stran z HTML-kodo, v kateri je postavljen element

Kombinacija

V tem primeru je prilagoditev mesta za mobilne naprave uporabljena zaradi kombinacije zmogljivosti jаvascript in strežniških funkcij. Kako izgleda splošna shema? Uporabnik obišče spletno mesto iz določene naprave. jаvascript dobi informacije o tem, kaj je uporabil, in ga prenese na strežnik. Ustvari potrebno kodo, ki jo nato pošljete v napravo. Podatki o tem so shranjeni v piškotkih. Ob naslednjem obisku strežnik bere podatke iz njih. Posebnost tega pristopa je možnost uporabe različnih različic HTML kode. Vendar je za pravilno delovanje potrebno skrbeti za prisotnost glave Vary: User-agent. Mobilna različica spletnega mesta v tem primeru zahteva malo več dela.

Dinamični jаvascript in druge možnosti

V tem primeru je predvideno, da bo zagotovljena ista koda 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 to uresniči? Mnogi ljudje uporabljajo isti Vary: uporabniški posrednik za to. Pri delu s stranmi bodo informacije posodobljene tudi v realnem času, kar je gotovo zelo dobro. Glede teorije lahko še vedno govorite veliko. Kako se ne spomnim dive (

Priprava za izvedbo

Treba je opozoriti, da obstajajo dva pristopa k nalogi ustvarjanja prilagodljive strani:

1. Ročno.
2. Samodejno.

Na začetku je treba izbrati, na katero pot je treba iti. Torej, vtičnik za prilagajanje mesta za mobilne naprave bo pomagal hitro opraviti celotno delo. Toda le v primeru, da se vse ustvari v skladu z določenimi, jasno urejenimi pravili. Če je bil vir ustvarjen v skladu z njimi, mora program za prilagajanje mesta za mobilno napravo opraviti vse težave. Zaradi takšnih omejitev, včasih tudi drugih trenutkov in pomanjkanja popolne svobode ustvarjalnosti se večina odloča za ročno nastavitev. Program, čeprav v dobrih minutah pomaga dobesedno različico virov, vendar ima še vedno nekaj pomanjkljivosti.

Prilagodljiva postavitev

Da bi dobili dobesedno "sladkarije", moramo uporabiti samo relativne merske enote. V praksi so vse pisave prilagojene, velikost elementov pa je določena v odstotkih. Čeprav lahko občasno (če res želite) uporabite in px, vendar je bolje narediti brez njih. Pri določanju širine ali višine morate uporabiti določeno fiksno številko, kot so 1080, 1260 ali 768, in odstotek. Kot primer - širina: 90%. Lahko naredite in 80%, 99% in 100%. Vse je odvisno od želje mojstra. Kaj pa besedilo, ki se pojavi na določenem elementu? V tem primeru obstaja ena zelo dobra formula: širina pisave je deljena z istim faktorjem komponente ozadja in dobimo naš zahtevek. Včasih se zgodi, da so številke lahko zelo dolge. Na primer, standard je 1260. Uporabniki, ki imajo širino zaslona 780, prihajajo. Ko delimo, dobimo zelo veliko število. Ali je to potrebno zaokrožiti? No, tukaj je zapletena situacija. Mnogi ne kategorično svetujejo. Bolje je pogledati situacijo in oceniti, kako pomembna je natančnost. Na primer, ga lahko nastavite tako, da upošteva le dve, tri, štiri ali deset decimalnih mest. Verjemite mi, to je preprosto delo, ta prilagoditev mesta za mobilne naprave. CSS, če vsebuje vnose brez napak, lahko reproducira vse.

Prilagodljiva pisava, slike in medijske poizvedbe

Privzeto je v brskalnikih velikost pisave nastavljena na 16 px. Toda, kot smo že povedali prej, je ta pristop za nas zelo nezaželen. Kaj storiti v tem primeru? Potem delimo zahtevano vrednost po osnovnem. Upoštevajte nekaj primerov:

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

Rezultat mora biti napisan v velikosti pisave, pri čemer se doda po debelem črevesu. Če pa so te vrednosti kasneje vključene drugje, je treba upoštevati, da bo prikazana vrednost prikazana.

In zdaj o slikah. Vse lahko dodajate svojim atributom ali kaskadnim slogovnim listom z največjo širino. Ne pozabite, da je velikost podana v odstotkih! In nekaj besed o preiskavah v medijih. Uporabljajo se lahko v tistih primerih, ko je treba postaviti določene pogoje. Če je na primer širina zaslona manjša od 1260 točk, se bodo uporabila pravila, vgrajena v medijsko poizvedbo. Kaj lahko storijo? Če imamo lepo sliko ozadja, ki bi morala biti v celoti prikazana in ima uporabnik majhen zaslon, lahko v takih primerih predpiše, da je odstranjen. Na nek način medijske poizvedbe spominjajo na izjavo o. Toda njihova posebnost je zelo velika lastnost. Snemajo lahko vse spremembe, ki jih je treba opraviti pri delu z brskalniki določenih velikosti.

Zaključek

Število mobilnih naprav in ljudi, ki jih uporabljajo, nenehno narašča. Zato je zelo zaželeno, da se v postavitvi spletnega mesta, še preden je bil razvit, izdelali celo najmanjše podrobnosti, da ne omenjam konceptov. Navsezadnje je treba zagotoviti, da uporabniki, ki vstopajo na spletno mesto iz telefonov, ne prenašajo podatkov, ki jih ne bodo prikazani. Zakaj? No, osnovno je, da ne upočasnite strani za nalaganje. In bolje je, da se prepričate, da so podatki naloženi v majhnih delih, spletno mesto pa je delalo hitro in učinkovito.