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

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

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

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


Помислете за тага

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


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

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

    Адаптиране с използване на javascript

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

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

    Dynamic javascript и други опции

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

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

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

    Гъвкаво разположение

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

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

    По подразбиране, с размер на шрифта, размерът на шрифта е 16 px. Но, както вече споменахме, за нас такъв подход е много нежелателен. Какво да направите в този случай? След това трябва да разделите стойността на базовата. Нека разгледаме няколко примера:
  • 16/16 = 1 em.
  • 18/16 = 1125 em.
  • Полученият резултат трябва да бъде записан с размер на шрифта след добавяне на двоеточие. Вярно е, че ако тези стойности трябва да бъдат включени в бъдещето някъде другаде, трябва да се има предвид, че стойността, която току-що въведехме, ще бъде показана. А сега за изображенията. Всичко може да бъде направено или в техните атрибути, или в каскаден стилов лист заизползвайки max-width. Не забравяйте, че размерът е посочен като процент! И още няколко думи за медийните запитвания. Те могат да се използват в случаите, когато е необходимо да се определят определени условия. Например, ако ширината на екрана е по-малка от 1260 пиксела, ще се прилагат правилата, инвестирани в заявката за мултимедия. Какво могат да направят? Ако имаме добра фонова картина, която трябва да бъде показана изцяло, а потребителят има малък екран, в такива случаи можете да поръчате да го почистите. По някакъв начин медийните заявки приличат на конструкцията if. Но тяхната особеност е много голяма индивидуалност. Те могат да записват всички промени, които трябва да бъдат направени при работа с браузъри с определени размери.

    Заключение

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

    Свързани публикации