Мобильная версия gencentre.ru

На днях закончил работу над мобильной версией сайта http://gencentre.ru Международного Генеалогического Центра.

Задача стояла придумать, исходя из существующей десктопной версии, мобильную и добавить ее поддержку на поддомене http://m.gencentre.ru.

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

В процессе работы с классами адаптивности обнаружил одну особенность css. Стандартные бутстраповкие классы col-... работают от фактической ширины окна, а не документа. В декстопной версии при ширине окна меньше 768 пикселей появлялся горизонтальный скролл (правильно) и начинали работать классы col-xs... (неправильно). В итоге в широком документе контент располагался как в мобильной версии, чего быть было не должно.

Для исправления этого поведения все col-sm-... классы пришлось заменить на вызов специального метода, который выводил col-sm-... или col-xs-... в зависимости от версии сайта. В итоге, там, где в мобильной версии должны были стоять col-sm-... в десктопной стояли уже col-xs-... и дальнейших метаморфоз со страницей не происходило.

Теперь сайт имеет моб. версию без излишних хлопот и затрат.

2016-10-23 0 Битрикс, МГЦ, gencentre.ru, вёрстка, Разработка

Ваш комментарий

www.000webhost.com