Přizpůsobení mobilních stránek se stává stále oblíbenější kvůli rostoucímu počtu smartphonů a tablet. Co představuje? Jaké jsou výhody? Tato otázka se týká zejména majitelů internetových obchodů, stránek různých společností poskytujících služby, blogů a populárních fór. Jak lze webové stránky přizpůsobit mobilním zařízením? Zde je malý seznam otázek, které uvažujeme v článku.

Obecné informace

Takže, začněte s tím, co je adaptivní design. Jedná se o takzvanou konfiguraci, ve které všechny zařízení odesílají stejný kód HTML, ale velikost položek se upravuje pomocí CSS. Různé vyhledávače dokáží tyto stránky rozpoznat za předpokladu, že stránky a zdroje jsou otevřené pro skenování. Chcete-li takovou příležitost označit prohlížeče, použije se značka meta name = "viewport". Co je přizpůsobení webu mobilním zařízením?

Zvažte značku

Takže se musíte ujistit, že značka meta name = "viewport". Proč je on Obsahuje pokyny pro prohlížeč o tom, jak upravit velikost a měřítko stránky, s přihlédnutím k šířce obrazovky zařízení, ze kterého je web zobrazen. Pokud tuto malou položku nepřidáte, na výchozí stránce se zobrazí stránka založená na počítači. Současně se však mobilní prohlížeče pokusí optimalizovat obsah, což se projeví ve zvýšení počtu písem, škálovatelnosti obsahu nebozobrazení části obsahu, který se objeví na obrazovce. Je to hezké Ne, mobilní verze webu v tomto případě způsobí pouze negativní vnímání. Bylo by nepřiměřené písma mají posunout zpět a udělat další řadu akcí, které, ačkoliv jsou menší, ale stále únavné. Můžete si ověřit přizpůsobení webu pro mobilní zařízení pomocí smartphonu, tabletu nebo speciálních služeb a programů. Samozřejmě, že první dvě možnosti jsou výhodnější, ale pokud budete potřebovat důkladnou analýzu postojů různých zařízení, což šetří čas, pak vejde druhé.

Jaké jsou výhody přizpůsobení stránek mobilním zařízením?

Použití tohoto přístupu umožňuje:

Uživatelům sdílet obsah v případech, kdy mají jednu adresu.

Algoritmy pro vyhledávače získají přesné parametry stránky, bez záměny s různými verzemi.

Snížení pravděpodobnosti chyb.

Zkrácení doby stahování z důvodu potřeby opětovného indexování.

Ušetřete prostředky.

Navíc je jednodušší vytvořit adaptivní stránku než několik možností pro něco jiného. Přizpůsobení stránky pro mobilní zařízení (většina z nich docela dobře možné), není něco, co dost komplikovaná javascript znát a umět pracovat s kaskádových stylů (CSS) a obrázky. Existuje mnoho přístupů k tomuto úkolu. Článek bude diskutovat o třech nejoblíbenějších možnostech:

Důraz na javascript.

Kombinace.

Dynamické použití javascriptu.

Pojďmezvážit je podrobněji.

Adaptace pomocí javascriptu

V tomto případě se používá jeden obsah. A pomocí javascriptu se formátování mění s mechanismem fungování stránky. Vše v takových případech závisí na platformě. Tento algoritmus je podobný mediálním dotazům kaskádových stylů. Vezměme v úvahu malý příklad práce v praxi. Takže máme stránku s kódem HTML, který obsahuje prvek

Kombinace

V tomto případě se adaptace na stránky mobilního zařízení používá kvůli kombinaci funkcí javascript a funkcí serveru. Jak vypadá obecná schéma? Uživatel vstoupí na stránku z určitého zařízení. javascript získá informace o tom, co používá a pošle je na server. Vygeneruje se požadovaný kód, který je pak odeslán do zařízení. A informace o něm jsou uloženy v souborech cookie. A při příští návštěvě server načte data přesně z nich. Funkcí tohoto přístupu je možnost používat různé varianty kódu HTML. Je pravda, že pro správnou práci je třeba se starat o přítomnost nadpisu Vary: User-Agent. Mobilní verze webu v tomto případě vyžaduje trochu víc práce.

Dynamické javascript a další možnosti

V tomto případě se předpokládá, že stejný kód bude opatřen určitým prvkem označujícím externí soubor, jehož obsah se liší v závislosti na tom, který agent je používán. To znamená, že před námi budeme mít dynamickou stránku. Jak je implementováno? Mnoho lidí používá stejné Vary: User-Agent. A při prácinavíc informace o stránkách budou aktualizovány v reálném čase, což samozřejmě velmi dobré. Tam je hodně mluvit o teorii. Jak nemluvě o Pannu (), pomocí kterého můžete doslova „žonglovat“ vzhled stránek a mnoho dalších různých věcí. Ale máme zájem o to, jak to udělat!

Příprava na provedení

Je třeba poznamenat, že existují dva přístupy k provedení takového úkolu jako vytvoření adaptívního místa:

Manuál.

Automatické.

Nejprve musíte zvolit, který způsob, jak jít. Ano, plug-in pro přizpůsobení webu mobilním zařízením vám pomůže rychle udělat všechnu práci. Ale pouze pokud jsou všechny vytvořeny podle určitých, jasně regulovaných pravidel. Pokud byl prostředek vytvořen v souladu s ním, program pro přizpůsobení webu mobilnímu zařízení musí dělat veškeré potíže. Vzhledem k těmto omezením, a někdy i jiné věci a nedostatek úplné tvůrčí svobody nejvíce rozhodnout se pro ruční nastavení. A programy, i když doslova pomáhají za pár minut získat atraktivní verzi zdroje, ale přesto mají určité nevýhody.

Flexibilní uspořádání

Abychom dosáhli doslovného "cukroví", musíte použít pouze relativní jednotky měření. V praxi se všechny písma vejdou pod em a velikost prvků je označena jako procentní podíl. Ačkoli to je možné z času na čas (pokud opravdu chcete) a rh, ale je lepší udělat bez nich. Pokud je zadána šířka nebo výška, mělo by být použito pevně stanoveného pevného čísla 10801260nebo 768 a procento. Jako příklad - šířka: 90%. Můžete to udělat jak 80%, tak 99% a 100%. Vše závisí na touze průvodce. Ale co text, který se objeví na konkrétním elementu? V tomto případě existuje jeden velmi dobrý vzorec: šířka písma je rozdělena na stejný ukazatel komponenty pozadí a dostaneme náš šumivý výsledek. Někdy se stává, že čísla mohou být velmi dlouhá. Standard je například 1260. A uživatelé, kteří mají šířku obrazovky 780, přicházejí. V divizi budeme mít velmi dlouhé číslo. Nezapomeňte ji zaokrouhlit? No, tady je situace komplikovaná. Mnoho z nich kategoricky nedoporučuje. Nejlepší je podívat se na situaci a ocenit důležitost přesnosti. Můžete například nastavit, že se berou v úvahu pouze dvě, tři, čtyři nebo deset desetinných míst. Věřte mi, tato jednoduchá práce je tady, ta adaptace webu na mobilní zařízení. CSS, pokud obsahuje položky bez chyb, bude schopen reprodukovat všechny.

Flexibilita požadavků na písmo, obrázky a média

Ve výchozím nastavení je ve velikosti písma nastavena velikost písma na 16 px. Ale, jak již bylo řečeno, pro nás je takový přístup velmi nežádoucí. Co dělat v tomto případě? Poté musíte rozdělit hodnotu základní. Uvažujme několik příkladů:

16/16 = 1 em.

18/16 = 1125 em.

Výsledný výsledek musí být napsán ve velikosti písma po přidání dvojtečky. Je pravda, že pokud mají být tyto hodnoty v budoucnu zahrnuty někde jinde, je třeba mít na paměti, že hodnota, kterou jsme právě zadali, bude zobrazena. A teď pro obrázky. Vše může být provedeno buď v atributech, nebo v kaskádovém stylu propomocí maximální šířky. Nezapomeňte, že velikost je uvedena v procentech! A pár slov o mediálních dotazy. Mohou být použity v případech, kdy je nutné stanovit určité podmínky. Pokud je například šířka obrazovky menší než 1260 pixelů, použijí se pravidla investovaná do požadavku na média. Co mohou dělat? Pokud máme dobrý obrázek na pozadí, který by měl být zobrazen v plném rozsahu a uživatel má malou obrazovku, v takových případech si můžete objednat jeho čištění. V některých ohledech se dotazy médií podobají konstrukci if. Ale jejich jedinečnost je velkou individualitou. Mohou zaznamenávat všechny změny, které je třeba provést při práci s prohlížeči určitých velikostí.

Závěr

Počet mobilních zařízení a lidí, kteří je používají, se neustále zvyšuje. Proto je velmi žádoucí, aby v rozložení místa před zahájením jeho vývoje byly vypracovány i ty nejmenší detaily, nemluvě o koncepcích. Koneckonců, je nutné zajistit, aby uživatelé, kteří se přihlásili na stránky z telefonů, nenahraňovali data, která se nebudou zobrazovat. Proč No, je to elementární - ne zpomalení zatížení stránky. A je lepší dát data načteny v malých částech a samotná stránka pracuje rychle a efektivně.