Сайт для мобильных устройств

Сайт для мобильных устройств

Сайт для мобильных устройств

 

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

Проектов в компании 15 шт, из них 8 нужно было адаптировать под мобильные устройства. Кстати проверить сайт на корректное отображение, можно специальным инструментом от google mobile-friendly, который даст оценку корректности отображение сайта на мобильном устройстве, и даже даст рекомендации для адаптации ресурса.

Так вот, в связи с тем, что мне срочно нужно было исправить 8 сайтов, было принято решение создать модуль, который сможет управлять переключением стилей CSS отдельно как для мобильной и для десктопной версии, не зависимо от устройства и расширения экрана.

Как работает модуль переключения стилей для мобильных и десктопов

1. Пользователь заходит на сайт;

2. Система определяет устройство;

3. Система записывает устройство в сессию;

4. В зависимости от устройства, система считывает css файл;

5. Отдаем содержимое считанного CSS файла в п.4 через php скрипт;

6. Если мы хотим перейти с мобильной версии сайта на полную версию, то нажимаем кнопку «Перейти на полную версию сайта» и  наоборот. В этот момент система запишет Ваш выбор в сессию и при следующем заходе будет отдавать версию стилей с учетом предыдущего выбора.

Подключение модуля где будет мобильная и полная версия сайта

1. Для начала первым и наверное самым необходимым действием должно быть размещение кода <meta name=»viewport»> в контейнер  <head>, который указывает браузеру, что контент не должен сжиматься для полного отображения на экране.

2. Теперь нужно добавить ссылку на наш файл dynamiccss/dynamicoutput.css.php, который будет отдавать CSS стили для конкретной версии.

3. Нужно добавить ссылку для переключения между мобильным и десктопом

4. По умолчанию используются css файлы которые находятся в папке модуля dynamiccss/css/, то есть можно перенести Ваши стили в  dynamiccss/css/screen.css и поправить dynamiccss/css/mobile.css, при этом все будет работать.

Но так же можно вынести пути в конфигурационном файле dynamiccss/dynamic_css_conf.php к уже существующим CSS файлам (если файл со стилями для мобильной еще не существует, тогда нужно его создать!).

6. Теперь при заходе на сайт, у нас подтянуться стили на текущее устройство. Так же мы можем переключиться что бы подтянуть другой CSS файл, для этого  нужно воспользоваться нашей ссылкой, которую мы разместили в п.3.

Более детальную информации и пример подключения можно посмотреть в репозитории самого модуля (readme.txt).

 

Ошибки

Не подгружается css, если после подключении модуля это явно видно:

1. Убедитесь в том, что вы верно указали путь к главному файлу модуля:

<link rel=»stylesheet» type=»text/css» href=»path_to/dynamiccss/dynamicoutput.css.php?get_css» />

2. Для проверки нужно открыть исходный код страницы Ctrl+U и попробовать перейти по этой ссылке п.1. Если выдает ошибку, значит нужно исправить путь.

3. Если проблема остается, проверьте или корректно получилось подключить css файл и верно указан путь к папке, где находятся CSS. Для проверки воспользоваться п.2

4. Если не отображается кнопка переключение стилей, необходимо проверить верно ли указан путь к модулю, аналогично п.1.

<a href=»path_to/dynamiccss/dynamicoutput.css.php?user_choice» id=»dynamic_css»></a>
<script src=»path_to/dynamiccss/dynamicoutput.css.php?get_js»></script>

 

Программа писалась на быструю руку, поэтому просьба сильно не ругаться на качество кода))

Демку модуля можно посмотреть здесь

Модуль выложил на github,  посмотреть или скачать можно по ссылке

Если Вы еще не умеете работать с сервисом github.com, советую прочесть следующую статью Как залить на github

 

0 ответы

Ответить

Хотите присоединиться к дискуссии?
Приглашаем поучаствовать!

Добавить комментарий