Адаптиране на сайта на мобилни устройства - Palycha Studio

Този мета таг се вмъква в главния контейнер на вашия сайт.

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

За по-подробни настройки на дисплея използвайте допълнителни стойности

Ширина на сайта на мобилни екрани

Позволява ви да адаптирате ширината на сайта към ширината на екрана на устройството

За да направим сайта по-четим, ще зададем фиксирана ширина на показване на страницата и вече с тази ширина ще редактираме показването на текстове, блокове и т.н. в стилове. В нашия пример ще вземем за основа ширината на сайта 600px

И в css на шаблона ще напишем правило за медийна заявка, в което ще се прилагат стилове, когато ширината на екрана е 600 пиксела. И тъй като сме задали точно тази резолюция за показване на екрани в мобилни устройства, ще се използват стиловете, посочени в правилата, които сме задали. Общите стилове ще бъдат приложени по същия начин, както на обикновен монитор, но ако посочим някакви стилове в правилата, тогава тези стилове ще бъдат заменени от тези по подразбиране.

Също така е необходимо да се вземе предвид факта, че като зададем фиксирана ширина за показване на съдържание, ще получим един и същ резултат при различни резолюции на екрана. Но все пак, при всяка резолюция на самия екран, страницата ще се показва на цял екран. Това ще ни даде две основни ползи.

  • Ще получим един и същ дисплей при различни резолюции на екрана
  • Трябва да стилизираме само за тази медийна заявка, а не за всяка резолюция на екрана.

Височина на уебсайта на мобилни екрани

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

За да коригираме тази грешка, можем да използваме правилото

Мащабиране на уебсайт на екрани на мобилни устройства

С помощта на това правило можем да разрешим или забраним мащабиране на страницата на сайта.

И така създадохме нашия изгледен прозорец и създадохме медийна заявка за него

В нашата медийна заявка създадохме стиловете, от които се нуждаем. Това, което имаме, виждаме на фиг. 3 или чрез връзката (минаваме от мобилни устройства)

прозорец за изглед

медийна заявка

фиг.1 Показване на сайт без мета таг

palycha
на прозореца за изглед