Адаптиране на сайта за мобилни устройства: стъпка по стъпка. Версия на мобилния сайт

Мобилната адаптация на сайта става все повече и повечев търсенето поради увеличаването на броя на смартфоните и таблетите. Какво е това? Какви предимства дава? Особено този въпрос е от значение за собствениците на онлайн магазини, уеб сайтове на различни компании за услуги, блогове и популярни форуми. Как може сайта да бъде адаптиран за мобилни устройства? Ето кратък списък от въпроси, които ще разгледаме в рамките на статията.

Обща информация

Така че, първо, нека да погледнем какво е товапредставлява адаптивен дизайн. Това е името на конфигурация, в която се изпраща един и същ HTML код на всички устройства, но размерът на елементите се коригира чрез CSS. Различните роботи за търсене могат да разпознават такива сайтове, при условие че страниците и ресурсите са отворени за сканиране. За да се даде възможност на браузърите за тази възможност, се използва маркер за мета име: "viewport". Каква е адаптацията на сайта за мобилни устройства?

Помислете за маркера

И така, е необходимо да се погрижим за товамаркер за мета име = "Изглед". За какво? Това са указания на браузъра как да регулирате размера и мащаба на страницата на ширината на екрана на устройството, от които можете видите на сайта. Ако не добавите този малък елемент, страницата по подразбиране ще бъде страницата, предназначена за компютри. Но докато мобилни браузъри ще се опитат да оптимизират съдържанието, което ще доведе до увеличаване на шрифта, мащабируем съдържанието или показване на съдържанието, което се побере на екрана. Приятно ли е? Не, мобилната версия на сайта в този случай ще предизвика само отрицателно възприятие. След като всички шрифтове ще бъдат непропорционални, е необходимо да преминете на страницата и да направи по редица действия, които, макар и да са незначителни, но все пак досаден. Проверете дали адаптацията на сайта за мобилни устройства може да използва смартфон, таблет или специални услуги и програми. Разбира се, първите два варианта са за предпочитане, но ако имате нужда от задълбочен анализ от гледна точка на различни устройства и да се спести време, а след това се поберат на последния.

Какви са предимствата на адаптирането на сайта за мобилни устройства?

Използването на този подход позволява:

1. Потребителите споделят съдържание в случаите, когато има един адрес.
2. Алгоритмите за търсачки получават точни параметри на страницата, няма объркване с различни версии.
3. Намаляване на вероятността от грешки.
4. Намалете времето за изтегляне поради липсата на повторно индексиране.
5. Запазете ресурси.

В допълнение адаптивната страница е по-лесна за създаване,а не няколко варианта на нещо едно. Адаптирането на сайт за мобилни устройства (това е напълно възможно да го направите сами) не е нещо сложно, достатъчно е да знаете JavaScript и да можете да работите с каскадни стилови листове (CSS) и изображения. Има много подходи за изпълнение на задачата. В рамките на статията ще бъдат разгледани три най-популярни варианта:

1. Фокусирайте се върху JavaScript.
2. Комбинирането.
3. Динамично използване на JavaScript.

Нека ги разгледаме по-подробно.

Адаптиране с помощта на JavaScript

В този случай се използва едно съдържание. И с помощта на JavaScript форматирането се променя с механизма на страницата. Всичко в такива случаи зависи от платформата. Този алгоритъм е подобен на медийните заявки за каскаден стилов лист. Помислете за малък пример на работа на практика. Така че имаме страница с HTML-код, в която е поставен елементът <script>. Когато бъде поискано, те ще предават същите данни. Но когато става дума за обработка, това ще бъде силно повлияно от характеристиките на устройството. В резултат на това форматирането на страницата ще се промени. Като пример, ситуацията с изображение, което ще бъде оптимизирана за цел да го гледате на смартфони и таблети, а не на компютри. Важно предимство на тази опция е, че компютърът автоматично разпознава изпълнението. Освен това не е нужно да получавате специален хедър, тъй като няма динамично съдържание.

съчетание

В този случай адаптирането на сайта към мобилнияУстройството се използва благодарение на съчетанието както на способностите на JavaScript, така и на функциите на сървъра. Как изглежда общата схема? Потребителят посещава сайта от определено устройство. JavaScript получава информация за това, което използва и го предава на сървъра. Той генерира необходимия код, който след това се изпраща на устройството. И информацията за това се съхранява в "бисквитките". При последващото посещение сървърът чете данните от тях. Особеността на този подход е възможността за използване на различни версии на HTML кода. За правилна работа обаче е необходимо да се грижи за наличието на заглавието Vary: User-agent. В този случай мобилната версия на сайта изисква малко повече работа.

Динамичен JavaScript и други опции

В този случай се предвижда, че ще имапри условие, че същият код е със специфичен елемент, който показва външен файл, чието съдържание варира в зависимост от това кой агент се използва. Това означава, че ще имаме динамична страница пред нас. Как се реализира това? Много хора използват същия Vary: User-agent за това. И когато работите със страници, информацията ще бъде актуализирана и в реално време, което със сигурност е много добро. По теорията все още можете да говорите много. Как да не помните divas (<div>), с които буквално можете да "жонглирате" появата на сайта и много други неща. Но в края на краищата ние се интересуваме от това как да го направим!

Подготовка за изпълнение

Трябва да се отбележи, че има два подхода към задачата за създаване на адаптивен сайт:

1. Ръчно.
2. Автоматично.

Първоначално е необходимо да изберете кой пътда отида. Така че приставката за адаптиране на сайта за мобилни устройства ще ви помогне бързо да извършите цялата работа. Но само в случай, че всичко е създадено в съответствие с определени, ясно регулирани правила. Ако ресурсът е създаден в съответствие с тях, програмата за адаптиране на сайта за мобилното устройство трябва да изпълни всички проблеми. Поради такива ограничения, а понякога и други моменти и липсата на пълна свобода на творчеството, повечето предпочитат ръчната настройка. Програма, въпреки че буквално помага в рамките на няколко минути, за да получи атрактивна версия на ресурса, но все пак има определени недостатъци.

Гъвкаво оформление

За да излезем буквално "бонбони",Трябва да се използват само относителни измервателни единици. На практика шрифтовете са персонализирани за тях, а размерът на елементите е определен в проценти. Въпреки че можете периодично (ако наистина искате) да използвате и px, но е по-добре да се направи без тях. Когато посочвате ширина или височина, трябва да използвате фиксиран фиксиран номер като 1080, 1260 или 768 и процент. Като пример - ширина: 90%. Можете да направите и 80%, и 99%, и 100%. Всичко зависи от желанието на господаря. Но какво да кажем за текста, който се показва на определен елемент? В този случай има една много добра формула: ширината на шрифта е разделена на един и същи коефициент на фоновия компонент и получаваме претенцията си. Понякога се случва, че номерата могат да бъдат много дълги. Например стандартът е 1260. И потребителите, които имат ширина на екрана от 780, влизат. Когато ги разделяме, получаваме много дълъг брой. Необходимо ли е да го закръгнете? Е, ситуацията тук е сложна. Много от тях категорично не съветват. По-добре е да разгледаме ситуацията и да преценим колко важна е точността. Можете, например, да го зададете, за да отчете само два, три, четири или десет десетични знака. Повярвайте ми, това е просто работа, тази адаптация на сайта за мобилни устройства. CSS, ако съдържа записи без грешки, може да възпроизведе всичко.

Гъвкави заявки за шрифтове, изображения и медии

По подразбиране в браузърите е зададен размер на шрифтапри експонат от 16 px. Но, както вече беше посочено по-горе, този подход е много нежелан за нас. Какво да направя в този случай? След това разделяме необходимата стойност на основната. Обмислете няколко примера:

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

Резултатът трябва да бъде написанразмер на шрифта, добавяне след двоеточие. Ако обаче тези стойности впоследствие са включени другаде, трябва да се има предвид, че стойността, която сме въвели, ще бъде показана.

И сега за образите. Можете да добавите всичко или към техните атрибути, или към каскаден стилов лист, използвайки максимална ширина. Не забравяйте, че размерът е даден в проценти! И няколко думи за медийни запитвания. Те могат да се използват в тези случаи, когато е необходимо да се поставят определени условия. Например, ако ширината на екрана е по-малка от 1260 пиксела, ще бъдат приложени правилата, вложени в заявката за мултимедия. Какво могат да направят? Ако имаме красива фонова снимка, която трябва да се показва изцяло и потребителят има малък екран, в такива случаи можете да предпишете, че той е премахнат. По някакъв начин заявките на медиите напомнят декларацията if. Но тяхната особеност е много голяма ... индивидуалност. Те могат да записват всички промени, които трябва да се правят, когато работите с браузъри с определени размери.

заключение

Броят на мобилните устройства и хората, коитоте се използват, непрекъснато се разраства. Поради това, че е желателно, че разположението на обекта преди началото на неговото развитие са разработени дори най-малките подробности, да не говорим на понятията. В крайна сметка е необходимо да се гарантира, че потребителите, които влизат в сайта от телефони, не изтеглят данни, които няма да се показват. Защо? Е, това е елементарно - да не забавяте зареждането на страници. И е по-добре да се уверите, че данните се зареждат на малки порции, а самият сайт работи бързо и ефективно.

</ p>