Разработка мобильной версии сайта для DRUPAL8?

Главные вкладки

Аватар пользователя pingvin156 pingvin156 7 января 2018 в 12:14

Основная версия сайта уже есть, макеты для мобильной есть. Нужно создать мобильную версию сайта. Как это делается?
Явно не проверкой браузера и if/else, верно? Возможно, есть какой-то модуль, который использует другую тему для мобилок, или я неверно понимаю процесс...

Комментарии

Аватар пользователя pingvin156 pingvin156 7 января 2018 в 15:55

Я так понимаю адаптивная тема настраивается под ширину. А если еще необходима возможность принудительного переключения между версиями: мобильной и десктопной?

Аватар пользователя pingvin156 pingvin156 7 января 2018 в 17:08

У меня как раз bootstrap. Только не очень-то понимаю, что именно надо делать. Мне нужно, чтобы автоматом определялось: мобильная/десктопная и был переключатель

Аватар пользователя OldWarrior OldWarrior 7 января 2018 в 19:56

В случае с бутстрепом как бы нет принципиальной/концептуальной разницы между мобильным и десктопом. Десктопную версию можно рассматривать так же, как мобильную, но только с очень большим числом возможных колонок (т.е. технически просто очень большой размер устройства). И наборот - мобильная версия это обычно одноколоночный вариант десктопной. В этом, собственно, и есть удобство и прелесть работы с бутстрепом - нет нужды писать медиазапросы под каждый размер устройства, всё делает прозрачно ядро бутстрепа. Остаётся только продумывать layout'ы в ключевых ширинах устройств и устанавливать классами поведение колонок.

В этой связи мне как-то не понятно: а зачем вообще понадобилось что-то под бутстрепом устанавливать принудительно "переключателем"? Какая в этом реальная необходимость - кроме "мне так хочется" ?

PS. На всякий случай: подобной "волшебной кнопки" в бустрепе нет. Думаю, вопрос состоит в том, чтобы принудительно динамически (или на JS, по каким-то событиям типа клика) устанавливать ключевым колонкам типичные для десктопа классы типа "col-lg-X" и опять же принудительно удалять типичные "мобильные" классы типа "col-xs-X" и "col-sm-X". Но, имхо, это какой-то изврат.

Аватар пользователя pingvin156 pingvin156 7 января 2018 в 20:28

В конкретно моем случае проблема заключается в том, что разница между десктопной и мобильной версиями довольно существенная. Наверное, просто не получится....
Я вот думал насчет адаптивной верстки, но как он определяет. Вот в шаблоне какая переменная отвечает за версию.. мобильную или десктоп... Думал вариант с переключателем тем, т.е. вообще создать 2 темы и каким-то образом переключаться между ними... или изврат?
А про переключатель - это требование заказчика.

Аватар пользователя OldWarrior OldWarrior 7 января 2018 в 20:37

pingvin156 wrote:

Думал вариант с переключателем тем, т.е. вообще создать 2 темы и каким-то образом переключаться между ними... или изврат?

На самом деле распространённая практика. И для Друпала есть готовые модули, позволяющие переключаться между темами на "лицевой стороне". Но обычно темы переключаются между какими-то вариантами оформления/дизайна, а не версиями "мобильный - десктоп".

Аватар пользователя OldWarrior OldWarrior 7 января 2018 в 20:39

pingvin156 wrote:

В конкретно моем случае проблема заключается в том, что разница между десктопной и мобильной версиями довольно существенная. Наверное, просто не получится....

media queries ещё никто не отменял, даже под бутстрепом.

Аватар пользователя VasyOK VasyOK 7 января 2018 в 20:56

Бутстрап он адаптивный сам по себе. Но тема оформления - это шапка, сайдбары, подвал. Если у вас эти области не адаптивны, вы (или вам) конкретно накосячили.

А есть контент. В Друпале это ноды, вьюсы, панели. Их надо делать адаптивными. Есть модули, помагающие адаптировать вьюхи и панели под Бутстрап, но легче руками прописывать медиазапросы в CSS и ставить классы Бутсрапа в дивах выводимого контента.

Аватар пользователя gun_dose gun_dose 8 января 2018 в 22:17
1

Сделайте жс переключалку класса для боди. Когда она включена, то у боди мин видтх 1200 пкс, а когда выключена, то 100%. Ну и конечно же, теорию бы вам подтянуть, а то некоторые высказывания слегка шокируют.

Аватар пользователя Andruxa Andruxa 10 января 2018 в 16:15
1

pingvin156 wrote:

В конкретно моем случае проблема заключается в том, что разница между десктопной и мобильной версиями довольно существенная.

Я так понимаю, что контент страницы будет отличаться, одной вёрстки может быть недостаточно.
Вот тут обсуждалась такая ситуация.

Аватар пользователя pingvin156 pingvin156 17 января 2018 в 7:02

Согласен, еще "плаваю" в теме, но очень стараюсь разобраться...
Возможен ли такой вариант: через js сделать переключалку, которая устанавливает переменную для шаблона и уже дальше, чтобы шаблон (через theme_preprocess_page или page.html.twig) скрыл два региона: primary и secondary - по идее мне этого будет достаточно, а остальное, как говорится, дело техники

Аватар пользователя pingvin156 pingvin156 17 января 2018 в 7:22

В общем, надо как-то повлиять на отображение регионов: включить/выключить (причем автоматом в зависимости от ширины экрана), но не через css, чтобы не грузить весь контент...

Аватар пользователя ivnish ivnish 17 января 2018 в 13:11

Не забывайте, что адаптивность нужна не только при загрузке, но и при ресайзе страницы.Если у вас контент не подгрузится, то и при ресайзе он не появится, как это было бы, если бы использовались CSS media queries

Аватар пользователя VasyOK VasyOK 10 января 2018 в 16:51

Одной верстки волне может быть достаточно, если вносить изменения типа:

@media only screen and (max-width: 600px) {
   .selektor {        
        display: none;
    }
}

Другое дело что вам может понадобиться переверстка. Сайт показывайте.

Аватар пользователя pingvin156 pingvin156 17 января 2018 в 14:40

Думаю, breakpoint-ы подойдут. Осталось научиться их отлавливать и обновлять структуру темы по этим breakpoint...
В противном случае, все придется писать на JS и css, а это не есть тру