КампутарыІнфармацыйныя тэхналогіі

Адаптацыя сайта пад мабільныя прылады: пакрокавая інструкцыя. Мабільная версія сайта

Мабільная адаптацыя сайта становіцца ўсё больш запатрабаванай з-за павелічэння колькасці смартфонаў і планшэтаў. Што яна сабой уяўляе? Якія перавагі дае? Асабліва гэтае пытанне актуальнае для ўладальнікаў інтэрнэт-крам, сайтаў розных сэрвісных кампаній, блогаў і папулярных форумаў. Як можа быць праведзена адаптацыя сайта пад мабільныя прылады? Вось невялікі пералік пытанняў, якія мы разгледзім у рамках артыкула.

Агульная інфармацыя

Такім чынам, для пачатку давайце разгледзім, што сабой уяўляе адаптыўны дызайн. Так называецца канфігурацыя, пры якой на ўсе прылады адпраўляецца адзін і той жа HTML-код, але памеры элементаў карэктуюцца дзякуючы CSS. Розныя пошукавыя робаты ўмеюць распазнаваць такія сайты пры ўмове, што старонкі і рэсурсы адкрытыя для сканавання. Для таго каб паказваць браўзэрам на наяўнасць такой магчымасці, выкарыстоўваецца тэг meta name = "viewport". Што ж уяўляе сабой адаптацыя сайта пад мабільныя прылады?

разгледзім тэг

Такім чынам, неабходна паклапаціцца аб тым, каб быў тэг meta name = "viewport". Навошта ён? Менавіта ў ім знаходзяцца інструкцыі для браўзэра пра тое, як варта карэктаваць памеры і маштабаваць старонку з улікам шырыні экрана прылады, з якога праглядаецца сайт. Калі не дадаць гэты невялікі элемент, то па змаўчанні будзе паказаная старонка, разлічаная на кампутары. Але пры гэтым мабільныя браўзэры будуць старацца аптымізаваць змест, што выкажацца ў павелічэнні шрыфтоў, маштабаванасці зместу або адлюстраванні часткі змесціва, якое залазіць на экран. Прыемна гэта? Не, мабільная версія сайта ў такім выпадку выкліча толькі негатыўнае ўспрыманне. Бо шрыфты будуць непрапарцыйнымі, прыйдзецца пракручваць старонку і здзяйсняць яшчэ шэраг дзеянняў, якія, хоць і з'яўляюцца другараднымі, але ўсё ж стомныя. Праверыць адаптацыю сайта пад мабільныя прылады можна з дапамогай смартфона, планшэта або спецыяльных сэрвісаў і праграм. Вядома, два першыя варыянты больш пераважныя, але калі патрэбен пільны аналіз з пазіцыі розных прылад і эканоміі часу, тады падыдуць апошнія.

Якія ж перавагі дае адаптацыя сайта пад мабільныя прылады?

Выкарыстанне падобнага падыходу дазваляе:

  1. Карыстальнікам дзяліцца кантэнтам ў тых выпадках, калі ў яго ёсць адзін адрас.
  2. Алгарытмах пошукавых сістэм атрымліваць дакладныя параметры старонкі, няма блытаніны з рознымі версіямі.
  3. Знізіць верагоднасць ўзнікнення памылак.
  4. Скараціць час загрузкі дзякуючы адсутнасці неабходнасці переиндексации.
  5. Эканоміць рэсурсы.

Акрамя таго, адаптыўную старонку стварыць лягчэй, чым некалькі варыянтаў чагосьці аднаго. Адаптацыя сайта пад мабільныя прылады (самому гэта зрабіць цалкам магчыма) не з'яўляецца чымсьці складаным, дастаткова ведаць JavaScript і ўмець працаваць з каскаднымі табліцамі стыляў (CSS) і малюнкамі. Існуе мноства падыходаў да выканання пастаўленай задачы. У рамках артыкула будзе разгледжана тры самых папулярных варыянту:

  1. Упор на JavaScript.
  2. Камбінаванне.
  3. Дынамічнае выкарыстанне JavaScript.

Давайце ж разгледзім іх больш падрабязна.

Адаптацыя з выкарыстаннем JavaScript

У такім выпадку выкарыстоўваецца адзін кантэнт. А з дапамогай JavaScript змяняецца фарматаванне з механізмам працы старонкі. Усё ў такіх выпадках залежыць ад платформы. Гэты алгарытм падобны на медыя-запыты каскаднай табліцы стыляў. Разгледзім невялікі прыклад працы на практыцы. Такім чынам, у нас ёсць старонка з HTML-кодам, у якім размешчаны элемент