Prispôsobenie stránky pre mobilné zariadenia: krok za krokom. Verzia pre mobilné stránky

Prispôsobenie mobilných webových stránok sa stáva čoraz populárnejšou vzhľadom na rastúci počet smartfónov a tabletov. Čo zastupuje? Aké sú výhody? Táto otázka je dôležitá najmä pre majiteľov internetových obchodov, stránok rôznych spoločností poskytujúcich služby, blogov a populárnych fór. Ako sa webová stránka môže prispôsobiť mobilným zariadeniam? Tu je malý zoznam otázok, ktoré uvažujeme v článku.

Všeobecné informácie

Takže, najskôr zvážme, čo predstavuje adaptívny dizajn. Toto je takzvaná konfigurácia, v ktorej všetky zariadenia odosielajú rovnaký kód HTML, ale veľkosť položiek sa upravuje pomocou CSS. Rôzne vyhľadávacie nástroje dokážu rozpoznať tieto stránky za predpokladu, že stránky a zdroje sú otvorené na skenovanie. Ak chcete takúto príležitosť označiť prehliadačom, použije sa značka meta name = "viewport". Čo je úprava stránky pre mobilné zariadenia?


Zvážte značku

Takže sa musíte uistiť, že značka meta name = "viewport". Prečo je on Obsahuje pokyny pre prehliadač o tom, ako upraviť veľkosť a zmenšiť veľkosť stránky, berúc do úvahy šírku obrazovky zariadenia, z ktorého je web zobrazený. Ak túto malú položku nepridáte, na predvolenej stránke sa zobrazí stránka založená na počítači. Súčasne sa však mobilné prehliadače pokúsia optimalizovať obsah, čo sa prejaví v náraste počtu písiem, škálovateľnosti obsahu alebozobrazuje časť obsahu, ktorý sa objaví na obrazovke. Je to pekné Nie, mobilná verzia stránky v tomto prípade spôsobí iba negatívne vnímanie. Koniec koncov, fonty budú neprimerané, budú musieť listovať stránku a vykonávať rad akcií, ktoré, hoci sú druhotné, ale stále zdĺhavé. Môžete skontrolovať prispôsobenie stránky pre mobilné zariadenia pomocou smartphonu, tabletu alebo špeciálnych služieb a programov. Samozrejme, prvé dve možnosti sú lepšie, ale ak potrebujete dôkladnú analýzu z hľadiska rôznych zariadení a šetríte čas, potom sa budú zhodovať s poslednými.


Aké sú výhody prispôsobenia stránky mobilným zariadeniam?

Použitie tohto prístupu umožňuje:
  • Používatelia zdieľať obsah v prípadoch, keď majú jednu adresu.
  • Algoritmy vyhľadávacích nástrojov získajú presné parametre stránky, bez zámeny s rôznymi verziami.
  • Znížiť pravdepodobnosť chýb.
  • Znížte čas sťahovania z dôvodu potreby opätovného indexovania.
  • Uložte zdroje.
  • Okrem toho je jednoduchšie vytvoriť adaptívnu stránku, než niekoľko možností pre niečo iné. Prispôsobenie stránky mobilnému zariadeniu (je to celkom možné urobiť sami) nie je niečo komplikované, stačí poznať javascript a byť schopný pracovať s kaskádovými štýlmi (CSS) a obrázkami. Existuje mnoho prístupov k úlohe. Článok sa bude zaoberať troma najobľúbenejšími možnosťami:
  • Dôraz na javascript.
  • Kombinácia.
  • Dynamické používanie javascriptu.
  • Poďmezvážte ich podrobnejšie.

    Úprava pomocou javascriptu

    V tomto prípade sa používa jeden obsah. A pomocou javascriptu sa formátovanie mení s mechanizmom fungovania stránky. Všetko v takýchto prípadoch závisí od platformy. Tento algoritmus je podobný mediálnym dopytom kaskádových štýlov. Pozrime sa na malý príklad práce v praxi. Takže máme stránky s HTML kódom, čo je prvok

    spojenia

    V tomto prípade, adaptácia na webe pomocou mobilných zariadení prostredníctvom kombinácie javascript a vlastností a funkcií servera. Ako vyzerá všeobecná schéma? Používateľ vstúpi na stránku z určitého zariadenia. javascript dostane informácie o tom, čo používal a pošle ho na server. Vygeneruje sa požadovaný kód, ktorý sa potom odosiela do zariadenia. A informácie o ňom sú uložené v súbore cookie. A pri ďalšej návšteve server načíta údaje presne z nich. Funkciou tohto prístupu je možnosť používať rôzne varianty kódu HTML. Je pravda, že pre správnu prácu je potrebné dbať na prítomnosť nadpisu Vary: User-agent. Mobilná verzia stránky v tomto prípade vyžaduje trochu viac práce.

    Dynamické javascript a ďalšie možnosti

    V tomto prípade sa predpokladá, že bude mať rovnaký kód s položkou, ktorá odkazuje na externý súbor, ktorého obsah sa mení v závislosti na tom, čo činidlo sa použije. To znamená, že pred námi budeme mať dynamickú stránku. Ako sa implementuje? Mnoho ľudí používa ten istý Vary: User-Agent. A pri práci s nímĎalšie informácie o stránkach budú aktualizované v reálnom čase, čo je samozrejme veľmi dobré. Veľa hovorí o teórii. Ako nezmieňam panny (), s ktorými môžete doslova "žonglovať" vzhľad stránky a mnoho ďalších vecí. Ale máme záujem, ako to urobiť!

    Príprava na implementáciu

    Treba poznamenať, že existujú dva prístupy k vykonaniu takejto úlohy ako vytvorenie adaptívneho miesta:
  • Manuál.
  • Automatické.
  • Najprv sa musíte rozhodnúť, ktorý spôsob, ako ísť. Áno, plug-in pre prispôsobenie stránky mobilným zariadeniam vám pomôže rýchlo robiť všetku prácu. Ale iba ak je všetko vytvorené podľa určitých jasne regulovaných pravidiel. Ak bol zdroj vytvorený v súlade s ním, program na prispôsobenie stránky mobilnému zariadeniu musí robiť všetky problémy. Z dôvodu takýchto obmedzení a niekedy iných momentov a nedostatku úplnej slobody tvorivosti väčšina rozhoduje v prospech manuálneho ladenia. A programy, aj keď doslova pomáhajú za pár minút získať atraktívnu verziu zdroja, ale stále majú určité nevýhody.

    Flexibilné usporiadanie

    Aby sme získali doslovný "cukrík", musíte použiť iba relatívne jednotky merania. V praxi sa všetky fonty hodia pod em a veľkosť prvkov je uvedená ako percento. Hoci to je možné z času na čas (ak naozaj chcete) a rh, ale je lepšie robiť bez nich. Ak je zadaná šírka alebo výška, malo by sa použiť nefixované fixné číslo 10801260alebo 768 a percentuálny podiel. Ako príklad - šírka: 90%. Môžete urobiť 80% a 99% a 100%. Všetko závisí od túžby sprievodcu. Ale čo text, ktorý sa objavuje na konkrétnom prvku? V tomto prípade existuje jeden veľmi dobrý vzorec: šírka písma je rozdelená na ten istý ukazovateľ zložky pozadia a dostaneme náš šumivý výsledok. Niekedy sa stáva, že čísla môžu byť veľmi dlhé. Napríklad štandard je 1260. A užívatelia s šírkou obrazovky 780 prídu dovnútra. V divízii budeme mať veľmi dlhý počet. Nezabudnite to zaobchádzať? No, tu je situácia komplikovaná. Mnohí z nich kategoricky neodporúčajú. Najlepšie je pozrieť sa na situáciu a oceniť dôležitosť presnosti. Môžete napríklad nastaviť, že sa berú do úvahy len dve, tri, štyri alebo desať desatinných miest. Verte mi, táto jednoduchá práca je tu, táto adaptácia stránky na mobilné zariadenia. CSS, ak obsahuje záznamy bez chýb, bude schopné reprodukovať všetky.

    Flexibilita požiadaviek na písmo, obrázky a médiá

    Veľkosť písma je vo veľkosti písma nastavená na 16 pixlov. Ale ako sme už spomenuli, takýto prístup je pre nás veľmi nežiaduci. Čo robiť v tomto prípade? Potom musíte rozdeliť hodnotu základnej hodnoty. Pozrime sa na niekoľko príkladov:
  • 16/16 = 1 em.
  • 18/16 = 1125 em.
  • Výsledný výsledok musí byť napísaný vo veľkosti písma po pridaní dvojbodka. Je pravda, že ak majú byť tieto hodnoty v budúcnosti zahrnuté niekde inde, treba mať na pamäti, že hodnota, ktorú sme práve zadali, sa zobrazí. A teraz pre obrázky. Všetko sa dá urobiť buď v ich atribútoch, alebo v kaskádovom štýlepomocou maximálnej šírky. Nezabudnite, že veľkosť je označená ako percento! A ešte pár slov o mediálnych otázkach. Môžu sa použiť v prípadoch, keď je potrebné stanoviť určité podmienky. Napríklad, ak je šírka obrazovky menšia ako 1260 pixelov, budú platiť pravidlá investované do žiadosti o médiá. Čo môžu robiť? Ak máme dobrý obrázok na pozadí, ktorý by mal byť zobrazený v plnom rozsahu a používateľ má malú obrazovku, v takýchto prípadoch si môžete objednať jeho čistenie. V niektorých ohľadoch sa mediálne dopyty podobajú konštrukcii if. Ale ich singularita je veľmi veľká individualita. Môžu zaznamenať všetky zmeny, ktoré je potrebné vykonať pri práci s prehliadačmi určitých veľkostí.

    Záver

    Počet mobilných zariadení a ľudí, ktorí ich používajú, sa neustále zvyšuje. Preto je veľmi žiaduce, aby sa v usporiadaní lokality pred začiatkom jej vývoja vypracovali aj najmenšie detaily, nehovoriac o konceptoch. Nakoniec je potrebné zabezpečiť, aby používatelia, ktorí sa prihlasujú na stránky z telefónov, neťahali údaje, ktoré sa nebudú zobrazovať. Prečo? No, je to elementárne - nie spomaľovať zaťaženie stránky. A je lepšie, aby sa dáta naložili v malých častiach a samotná stránka fungovala rýchlo a efektívne.

    Súvisiace publikácie