Компютри, Информационни технологии

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

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

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

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

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

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

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

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

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

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

  1. Акцентът в JavaScript.
  2. Комбинирането.
  3. Динамично използване на JavaScript.

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

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

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

съчетание

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

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

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

), с които можете да буквално "жонглират" външния вид на сайта и на много други различни неща. Но ние искаме да знаем как да го направя!

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

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

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

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

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

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

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

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

  1. 16/16 = 1 тях.
  2. 18/16 = 1,125 тях.

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

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

заключение

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

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 bg.delachieve.com. Theme powered by WordPress.