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

[garrik]

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

[Kylaksizov]

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

[inkanus.gray]

Для современных мобильных браузеров достаточно написать CSS-файл. В HTML-шаблон нужно вставить приблизительно такой код:

Код Выделить Развернуть


<link href="mobile.css" media="all and (max-width: 999px), handheld" rel="stylesheet" type="text/css" />
<link href="desktop.css" media="screen and (min-width: 1000px)" rel="stylesheet" type="text/css" />


Браузер сам выберет, какой CSS-файл из указанных использовать. Гуглите «css media queries».

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

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

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

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

[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;
  }
}