Адаптируем текст и прочие элементы для мобильных устройств.
uKit — это конструктор сайтов, который дает определенные готовые шаблоны для создания сайта и функционал, при помощи которого вы можете поменять все текущее наполнение на свое: логотип, картинки, текст, описание услуг, контакты и так далее.
Весь контент который вы установите на сайте автоматически адаптируется под мобильные устройства, но некоторые элементы не всегда устраивают веб-мастеров и в этой статье мы расскажем как изменить, те или иные элементы для мобильных устройств.
Адаптируем перенос слов для мобильных устройств в uKit
Часто, при длинных заголовках на сайтах возникают случаи, когда автоматический перенос слов на мобильной версии слегка режет глаз и и хочется изменить форматирование текста, пример такого отражения: скриншот
На примере вы можете видеть, что нарушены правила русского языка, из-за чего это сильно режет глаз и в качестве решения этой ситуации, мы хотим вам предложить 2 решения, чтобы установить корректный перенос слов:
1. Установить перенос слов самостоятельно, при помощи специального тега:
Для это вам необходимо этот тег, который расположен выше разместить внутри текста, как это необходимо вам, пример: скриншот. В итоге благодаря этому тегу мы получаем, тот перенос который полностью соблюдает правила русского языка на любых устройствах: скриншот (на скриншоте установлено разрешение в 260px)
Видео-демонстрация работы данного решения: ссылка
2. Уменьшаем размер текста только для мобильных устройств, при помощи установки дополнительного кода, пример отображения: скриншот
Чтобы установить его перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
@media (max-width: 499px) {
#main #body-fict header .ul-header-editor h1 {
font-size: 18px !important;
line-height: 20px !important;
}
#main #body-fict h1,
#main #body-fict .h1,
#main #body-fict .h1 li {
font-size: 30px !important;
line-height: 35px !important;
}
#main #body-fict h2,
#main #body-fict .h2,
#main #body-fict .h2 li {
font-size: 25px !important;
line-height: 30px !important;
}
#main #body-fict h3,
#main #body-fict .h3,
#main #body-fict .h3 li {
font-size: 20px !important;
line-height: 25px !important;
}
#main #body-fict h4,
#main #body-fict .h4,
#main #body-fict .h4 li {
font-size: 18px !important;
line-height: 23px !important;
}
#main #body-fict,
.ul-widget p,
#main #body-fict .normal,
#main #body-fict .normal li,
#main #body-fict li {
font-size: 16px !important;
line-height: 20px !important;
}
#main #body-fict p.important,
#main #body-fict .important,
#main #body-fict h5,
#main #body-fict h5 li {
font-size: 16px !important;
line-height: 20px !important;
}
#main #body-fict p.note,
#main #body-fict .note,
#main #body-fict h6,
#main #body-fict h6 li {
font-size: 15px !important;
line-height: 20px !important;
}
#main #body-fict .large {
font-size: 18px !important;
line-height: 18px !important;
}
#main #body-fict .middle {
font-size: 15px !important;
line-height: 15px !important;
}
#main #body-fict .small {
font-size: 14px !important;
line-height: 14px !important;
}
}
</style>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
Также этот скрипт позволяет изменить размер шрифта, что актуально при слишком большом шрифте заголовков сайта на мобильных устройствах.
Оптимизируем перенос слов в контактной информации сайта
Для многих не секрет, что на некоторых шаблонах, контакты переносятся некорректно (скриншот), для всех устройств, в том числе и мобильных (скриншот). В качестве решения этой ситуации мы предлагаем универсальный код, который исправляет перенос слов, пример: скриншот
Чтобы установить его перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
#main #body .ul-w-contacts ul li {
overflow-wrap: normal !important;
word-wrap: normal !important;
word-break: normal !important;
line-break: auto !important;
hyphens: manual !important;
}
</style>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
Уменьшаем виджеты "Пробел" на мобильных устройствах
Иногда для компьютерной версии сайта необходимо установить виджет "Пробел", который имеет большую высоту, чем обычно (пример) и в мобильных устройствах этот виджет получается очень большим, в некоторых случаях мы получаем очень большое пространства для скроллинга (скриншот). Чтобы решить эту проблему, мы предлагаем вам универсальный скрипт, который уменьшает все виджеты "Пробел" на сайте, для мобильных устройств, до определенного значения, которое вы можете изменять.
Чтобы установить его перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
@media (max-width:768px) {
.uspacer {
height: 15px !important;
}
}
</style>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
Размещаем любые виджеты в 2 ряда для мобильных устройств
Большинство веб-мастеров в uKit размещает виджеты "Товар" или "Карточка" 4 штуки в ряд (пример), в мобильных же устройствах получается вертикальное отображение, которое занимает большое пространство, из-за чего клиента приходится долго прокручивать страницу браузера, при этом получая меньше информации (пример).
Чтобы улучшить отображение таких элементов на сайте, мы предлагаем разместить ваши виджеты в 2 ряда: скриншот
Как установить данное решения предоставляю вам инструкцию:
1. Скопируйте ID вашего блока где размещены ваши виджеты, которые вы хотите разместить в 2 ряда для мобильных устройств: скриншот (зайти в веб-инспектор, вы можете при помощи горячих клавиш CTRL+SHIFT+C)
Как использовать инспектор, вы можете увидеть на видео: ссылка
2. После того как вы скопируете ID блока, то вам необходимо вместо "ID-БЛОКА" внутри скрипта (скриншот) установить полученное значение из первого пункта. Пример правильного размещенного кода: скриншот
3. Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте ваш код:
<script>
require(['jquery'], function($){
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
var block_widget = '.ch-grid, #ID-БЛОКА'; // блоки для 2 колонок
$(''+block_widget+'').each(function(){
var children_elem = $(this).children();
children_elem.css({
'width': '50%',
'padding': ''+children_elem.css('margin')+'',
'margin': '0',
'float': 'left'
});
if($(this).attr('class').indexOf('ch-grid') != -1) children_elem.css('height', ''+children_elem.innerWidth()+'px');
$(this).find('.ch-item').css('background-size', 'contain');
});
}
});
</script>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
Адаптируем картинки в слайдере на телефонах и планшетах
У слайдера в конструкторе uKit предусмотрена фиксированная высота, поэтому при демонстрации на мобильном устройстве изображения в равной степени обрезаются справа и слева, а высота остаётся прежней, и иногда это решение не совсем подходит веб-мастерам, особенно если в слайдере установлена картинка с текстом, пример: скриншот.
Если же вы хотите, чтобы слайдер сохранял пропорции на мобильном устройстве и картинки в нём не обрезались по бокам (пример), то вы можете установить стороннее решение адаптивного слайдера.
Ознакомиться с этим решением и скачать код, вы можете по следующему адресу: ссылка
| Всего комментариев: 20 | |
|
| |
