адаптация под мобильные устройства на dle

Автор Тема: адаптация под мобильные устройства на dle  (Прочитано 3664 раз)

Оффлайн garrikАвтор темы

  • Бизнес оценка: (0)
  • Дебютант
  • *
  • СПАСИБО: 0
  • Сообщений: 9
  • Карма: 0

Оффлайн garrikАвтор темы

  • Дебютант
  • *
Всем добрый день !!! Хотелось бы самостоятельно адаптировать свой сайт http://mskartel.ru/ под мобильные устройства . Если у кого то есть возможность подсказать поэтапность действий просьба откликнуться .


Оффлайн Kylaksizov

  • Бизнес оценка: (2, 100%)
  • Старожил
  • ****
  • СПАСИБО: 121
  • Сообщений: 389
  • Карма: 24
  • Пол: Мужской
  • Владимир Кулаксизов
    • Создание сайтов

Оффлайн Kylaksizov

  • Старожил
  • ****
Для этого нужно знать всего лишь верстку. Не имеет значения на каком движке делать адаптивность. Вернее есть, но в основном меняется только стили.


Оффлайн inkanus.gray

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 50
  • Сообщений: 163
  • Карма: 6
  • Пол: Мужской
    • Территория горячих дискуссий на произвольные темы

Оффлайн inkanus.gray

  • Постоялец
  • ***
Для современных мобильных браузеров достаточно написать CSS-файл. В HTML-шаблон нужно вставить приблизительно такой код:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Браузер сам выберет, какой CSS-файл из указанных использовать. Гуглите «css media queries».

Ещё нужно добавить мета-тег viewport.

В CSS-файле для мобилок используем увеличенные кнопки (не менее 48px), увеличенные шрифты (если можно, не меньше 16px), в общем, соблюдаем гайды Android, iOS, Windows Mobile.

Чтобы не было горизонтального скроллинга, в мобильной версии для боковой колонки указываем display:none. Поскольку на сенсорном экране событие hover бесполезно, переделываем так, чтобы меню разворачивалось по клику.

Вносить модификацию в движок придётся, только если необходимо поддерживать мобильные устройства десятилетней давности. В этом случае придётся проверять HTTP-заголовок User-Agent и выдавать мобилкам другой шаблон.

Оффлайн synt

  • Бизнес оценка: (0)
  • Дебютант
  • *
  • СПАСИБО: 0
  • Сообщений: 1
  • Карма: 0

Оффлайн synt

  • Дебютант
  • *
1. Продумать дизайн под 3 разрешения по горизонтали 340px, 768px, 992px
2. В DLE используется фреймворк bootstrap3
Для акативации определения разрешения устройства служит мета тэг
<meta name="viewport" content="width=device-width, initial-scale=1">

Для подключения в шаблоне DLE в header добавить
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Для удобства можно скачать не сжатую версию фреймворка newbielink:http://getbootstrap.com/getting-started/#download [nonactive]

в стилях есть медиа запросы под разные разрешения в них можно задать нужные стили в зависимоти от ваших задачь, как верстать шаблон под bootstrap3 можно почитать newbielink:http://bootstrap-3.ru/index.php [nonactive]
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}


 

Похожие темы

  Тема / Автор Ответов Последний ответ
0 Ответов
963 Просмотров
Последний ответ 26-09-2012, 22:27:20
от bibika
15 Ответов
5162 Просмотров
Последний ответ 06-03-2015, 14:18:08
от Theregula
5 Ответов
1578 Просмотров
Последний ответ 11-01-2016, 13:33:55
от dobrodukh
6 Ответов
7068 Просмотров
Последний ответ 27-02-2016, 16:06:12
от Sporto
1 Ответов
1227 Просмотров
Последний ответ 06-11-2016, 11:34:35
от wwwmaster