Sivuston mukauttaminen mobiililaitteille: vaiheittaiset ohjeet. Mobiilisivuston versio

Sivuston mobiilisovellus on yhä enemmänkysyntää älypuhelinten ja tablettien määrän kasvun vuoksi. Mikä se on? Mitä etuja se antaa? Erityisesti tämä kysymys koskee verkkokauppojen omistajia, eri palveluyritysten verkkosivustoja, blogeja ja suosittuja foorumeita. Kuinka sivustoa voidaan mukauttaa mobiililaitteille? Seuraavassa on lyhyt luettelo kysymyksistä, joita harkitsemme artikkelin puitteissa.

Yleistietoja

Katsotaan siis ensin, mikä onedustaa mukautuvaa muotoilua. Tämä on kokoonpanon nimi, jossa sama HTML-koodi lähetetään kaikille laitteille, mutta elementtien kokoa mukautetaan CSS: llä. Eri hakuharjoittelijat pystyvät tunnistamaan tällaiset sivustot edellyttäen, että sivut ja resurssit ovat avoimia skannausta varten. Jotta selaimille voidaan kertoa tämä mahdollisuus, käytetään meta-tunnisteita: "viewport". Mikä on sivuston mukauttaminen mobiililaitteille?

Harkitse tunnistetta

Niinpä on huolehdittava siitämeta name tag = "näkymäportti". Mitä varten? Se sisältää selaimen ohjeet sivun koon ja skaalan säätämisestä ottaen huomioon sen laitteen näytön leveyden, josta sivustoa tarkastellaan. Jos et lisää tätä pientä elementtiä, oletussivu on tietokoneelle suunniteltu sivu. Mutta mobiiliselaimet yrittävät optimoida sisältöä, mikä voi johtaa fonttien lisäämiseen, sisällön skaalautuvuuteen tai näyttämään jotain sisältöä, joka nousee näytölle. Onko se mukavaa? Ei, sivuston mobiiliversio aiheuttaa vain negatiivisen käsityksen. Loppujen lopuksi kirjasimet ovat suhteettomia, sinun on vieritettävä sivua ja tehtävä useita toimia, jotka ovat toissijaisia, mutta ovat edelleen tylsiä. Tarkista, että sivuston mukauttaminen mobiililaitteille voi käyttää älypuhelinta, tablet-laitteita tai erityisiä palveluita ja ohjelmia. Tietenkin kaksi ensimmäistä vaihtoehtoa ovat edullisempia, mutta jos tarvitset huolellisen analyysin eri laitteiden sijainnista ja säästät aikaa, niin jälkimmäinen tekee.

Mitkä ovat edut sivuston sopeuttamiseen mobiililaitteisiin?

Tämän lähestymistavan avulla:

1. Käyttäjät jakavat sisältöä niissä tapauksissa, joissa hänellä on yksi osoite.
2. Hakukoneiden algoritmit saavat täsmälliset sivuparametrit, ei ole sekaannusta eri versioita.
3. Vähennä virheiden todennäköisyyttä.
4. Pienennä latausaikaa uudelleenindeksoinnin puutteen vuoksi.
5. Tallenna resurssit.

Lisäksi mukautuva sivu on helpompi luoda,pikemminkin kuin jotain muunnelmia. Sovita sivusto mobiililaitteille (se on melko mahdollista tehdä se itse) ei ole mikään monimutkainen, riittää tietää JavaScript ja pystyä työskentelemään CSS-tyyliarkkien (CSS) ja kuvien kanssa. Tehtävässä on monia lähestymistapoja. Artikkelin puitteissa otetaan huomioon kolme suosituinta versiota:

1. Keskity JavaScript.
2. Yhdistämällä.
3. JavaScriptin dynaaminen käyttö.

Katsotaanpa ne yksityiskohtaisemmin.

Sopeutuminen JavaScriptin avulla

Tässä tapauksessa käytetään yhtä sisältöä. Ja JavaScriptin avulla muotoilu muuttuu sivun mekanismin avulla. Kaikki tällaisissa tapauksissa riippuu alustasta. Tämä algoritmi on samanlainen kuin Cascading -tyylilevyn mediakyselyt. Harkitse pieni esimerkki käytännön työstä. Joten meillä on HTML-koodin omaava sivu, jossa <script> -elementti on sijoitettu. Kun niitä pyydetään, ne lähettävät samat tiedot. Mutta kun kyseessä on käsittely, tämä vaikuttaa suuresti laitteen ominaisuuksiin. Tämän seurauksena sivun muotoilu muuttuu. Esimerkkinä voidaan mainita kuva tilanne, joka optimoidaan katselemalla älypuhelimia ja tabletteja, ei tietokoneita. Tämän vaihtoehdon tärkeä etu on se, että tietokone tunnistaa toteutuksen automaattisesti. Lisäksi sinun ei tarvitse saada erityistä otsikkoa, koska dynaamista sisältöä ei näytetä.

yhdistelmä

Tässä tapauksessa sivuston mukauttaminen mobiiliinLaitetta käytetään sekä JavaScript-ominaisuuksien että palvelinfunktioiden yhdistelmän ansiosta. Mitä yleinen järjestelmä näyttää? Käyttäjä vierailee sivustolla tietyltä laitteelta. JavaScript saa tietoja siitä, mitä käytti ja välittää sen palvelimelle. Se tuottaa tarvittavan koodin, joka lähetetään sitten laitteeseen. Tietoja tästä tallennetaan evästeisiin. Ja seuraavassa käynnissä palvelin lukee tiedot niistä. Tämän lähestymistavan erityispiirteenä on mahdollisuus käyttää eri versioita HTML-koodista. Oikean toiminnan kannalta on kuitenkin välttämätöntä huolehtia otsikon Vary: User-agentin läsnäolosta. Sivuston mobiiliversio vaatii tässä tapauksessa hieman enemmän työtä.

Dynaaminen JavaScript ja muut vaihtoehdot

Tässä tapauksessa suunnitellaan, että on olemassaedellyttäen samalla koodilla tietyn elementin, joka osoittaa ulkoisen tiedoston, jonka sisältö vaihtelee riippuen siitä, mikä aine käytetään. Eli meillä on dynaaminen sivu ennen meitä. Miten tämä toteutuu? Monet käyttävät samaa Vary: Käyttäjä-agentti tähän. Ja kun työskentelet sivuilla, tiedot päivitetään myös reaaliajassa, mikä on varmasti erittäin hyvä. Teorian perusteella voit silti puhua paljon. Kuinka ei voi muistaa divas (<div>), jolla voit kirjaimellisesti "manipuloida" sivuston ulkoasua ja paljon muita asioita. Mutta loppujen lopuksi me olemme kiinnostuneita siitä, miten se tehdään!

Täytäntöönpanon valmistelu

On huomattava, että mukautuvan sivuston luomiseen liittyy kaksi lähestymistapaa:

1. Manuaalinen.
2. Automaattinen.

Aluksi on valittava polkumennä. Joten plug-in mobiililaitteiden sivuston mukauttamiseksi auttaa tekemään kaiken työn nopeasti. Mutta vain siinä tapauksessa, että kaikki luodaan tiettyjen selkeästi säänneltyjen sääntöjen mukaan. Jos resurssi on luotu niiden mukaan, mobiililaitteen sivuston sopeuttamisohjelman on suoritettava kaikki ongelmat. Tällaisten rajoitusten ja toisinaan muiden hetkien ja täydellisen vapauden puuttumisen vuoksi useimmat valitsevat manuaalisen virityksen puolesta. Ohjelma, vaikka se auttaa kirjaimellisesti muutamassa minuutissa saadakseen houkuttelevan version resurssista, mutta silti on joitain haittoja.

Joustava layout

Jotta voimme saada kirjaimellisen "karkkia"Vain suhteellisia mittayksiköitä tulisi käyttää. Käytännössä fontit mukautetaan kaikkiin empiin, ja elementtien koko määritetään prosentteina. Vaikka voit säännöllisesti (jos todella haluat) käyttää ja px, mutta on parempi tehdä ilman niitä. Kun määrität leveyden tai korkeuden, käytä kiinteää kiinteää numeroa, kuten 1080, 1260 tai 768, ja prosenttiosuus. Esimerkkinä - leveys: 90%. Voit tehdä ja 80%, 99% ja 100%. Kaikki riippuu päällikön halusta. Mutta entä teksti, joka ilmestyy tietyllä elementillä? Tällöin on olemassa yksi erittäin hyvä kaava: fontin leveys jaetaan samalla tekijällä taustakomponentilla, ja saamme vaatimuksemme. Joskus tapahtuu, että numerot voivat olla hyvin pitkiä. Esimerkiksi standardi on 1260. Ja käyttäjiä, joiden näytön leveys on 780, tulevat sisään. Kun jakoamme, saamme erittäin pitkän numeron. Onko tarpeen pyöristää sitä? No, tässä tilanne on monimutkainen. Monet eivät ehdota kategorisesti. On parempi tarkastella tilannetta ja arvioida, kuinka tärkeää tarkkuus on. Voit esimerkiksi asettaa sen ottamaan huomioon vain kaksi, kolme, neljä tai kymmenen desimaalia. Uskokaa minua, tämä on yksinkertainen tehtävä, tämä sivuston mukauttaminen mobiililaitteille. CSS, jos se sisältää virheellisiä merkintöjä, voi toistaa kaiken.

Joustava fontti, kuvat ja mediakyselyt

Oletusarvon mukaan selaimissa kirjasimen koko on asetettu16 px: n eksponentissa. Mutta kuten edellä jo todettiin, tämä lähestymistapa ei ole meille kovinkaan toivottavaa. Mitä tehdä tässä tapauksessa? Sitten jakaa vaadittu arvo perusasetuksella. Harkitse muutamia esimerkkejä:

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

Tulos kirjoitetaanfonttikoko, lisäämällä kaksoispisteeseen. Jos nämä arvot sisällytetään myöhemmin muualle, on syytä muistaa, että syötetty arvo näkyy näytöllä.

Ja nyt kuvista. Voit lisätä kaikki joko niiden attribuutteihin tai CSS-tyyppiseen arkkia käyttäen max-width-arvoa. Älä unohda, että koko ilmoitetaan prosentteina! Ja muutamia sanoja mediatutkimuksista. Niitä voidaan käyttää niissä tapauksissa, joissa on tarpeen asettaa tiettyjä ehtoja. Jos esimerkiksi näytön leveys on pienempi kuin 1260 pikseliä, media-kyselyyn upotettuja sääntöjä sovelletaan. Mitä he voivat tehdä? Jos meillä on kaunis taustakuva, joka on näytettävä kokonaan ja käyttäjällä on pieni näyttö, näissä tapauksissa voit määrätä, että se poistetaan. Mediakyselyt tavallaan muistuttavat if-lausetta. Mutta niiden erityispiirteet ovat erittäin suuret ... yksilöllisyys. He voivat tallentaa kaikki muutokset, jotka on tehtävä, kun työskentelet tiettyjen kokoisten selainten kanssa.

johtopäätös

Mobiililaitteiden määrä ja ihmiset, jotkaniitä käytetään, ne kasvavat jatkuvasti. Siksi on erittäin toivottavaa, että sivuston ulkoasussa jopa pienimmät yksityiskohtia, puhumattakaan käsitteistä, on laadittu ennen sivuston kehittämistä. Loppujen lopuksi on välttämätöntä varmistaa, että puhelimeen saapuvat käyttäjät eivät lataa tietoja, joita ne eivät näy. Miksi? No, se on alkeellinen - ei hidasta lataus sivuja. Ja on parasta varmistaa, että tiedot ladataan pieninä osina, ja sivusto itse toimi nopeasti ja tehokkaasti.

</ p>