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

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

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

Для того, чтобы адаптировать сайт на instantCMS необходимо провести нехитрые допиливания в двух файлах.

Или же одной строчкой, о чем пойдет в самом конце материала.

Итак, чтобы адаптировать шаблон instantCMS под мобильные устройства открываем  /templates/_default_/template.php и внутри тега  <head> вставляем следующее:

Код PHP:

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

Затем открываем файл styles.css (или любой другой подключаемый файл стилей) и в его конце оставляем слудующую запись:

Код PHP:

  1. @media screen and (max-width:479px) {
  2. html *{
  3. max-width:100%;
  4. min-width: 0;
  5. }
  6. #topmenu .menu {
  7. background: #E8E8E8;
  8. }
  9. img {
  10. height: auto;
  11. }
  12. a.mod_latest_title {
  13. font-size: 140%;
  14. }
  15. .grid_4, .container_12 .grid_4 {
  16. width: 100%;
  17. }
  18. .container_12 .grid_12, .container_16 .grid_16{
  19. margin:0;
  20. }
  21. .mobileNoDisplay{
  22. display:none;
  23. }
  24. }

479px в первой строке файла стилей означает, что данные стили начнут действовать, если экран юзера ограничен 479 пикселями, это как раз вертикальный экран мобильного.

Для ускорения загрузки страниц сайта на мобильных устройствах также можно скрыть рекламные блоки (хотя кто ж лишит себя заработка)), добавив им класс mobileNoDisplay.


Теперь о том, как сделать шаблон instantCMS адаптированным для мобильных устройств одной строкой.

В файл template.php и перед закрывающим тегом </head> нужно вставить следующую строку

Код HTML:

  1. <meta name="viewport" content="width=device-width">

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

Категория: 
Хаки для Instantscms