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

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

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

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

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

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

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

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

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

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

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

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

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

В този случай се използва едно съдържание. И с помощта на jаvascript форматирането се променя с механизма на страницата. Всичко в такива случаи зависи от платформата. Този алгоритъм е подобен на медийните заявки за каскаден стилов лист. Помислете за малък пример на работа на практика. Така че имаме страница с HTML кода, в който е поставен елементът

съчетание

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

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

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

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

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

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. Но тяхната особеност е много голяма индивидуалност. Те могат да записват всички промени, които трябва да се правят, когато работите с браузъри с определени размери.

заключение

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