Форум русской поддержки Joomla!® CMS
10.12.2016, 01:18:39 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 1051 раз)
0 Пользователей и 1 Гость смотрят эту тему.
kik84
Живу я здесь
******

Репутация: +59/-4
Offline Offline

Сообщений: 1307



« : 16.08.2014, 10:33:51 »

Подскажите, как и что надо прописать в index.php шаблона, чтобы, если сайт открывался с мобильного устройства, то стили считывались из другого файла CSS.
Задача состоит в том, чтобы при открытии с мобильника, были:
1 другой размер шрифтов
2 другой стиль вывода для бэкграунда
3 еще пара мелочей...
Записан
evgen777
Завсегдатай
*****

Репутация: +62/-2
Offline Offline

Пол: Мужской
Сообщений: 691

skype:evgeniy8955 mail:office@sevweb.tk


« Ответ #1 : 16.08.2014, 10:57:57 »

как вариант
определять мобилку с помощью этого
и далее ставить условие вроде
Код
if( $detect->isMobile() ){
//тут подключаем стили для мобилки
}else{
//подключаем обычные стили
}
 
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Offline Offline

Сообщений: 1250


« Ответ #2 : 16.08.2014, 11:35:52 »

Тоже, как вариант:
Код
jImport('joomla.application.web.webclient'); 
$client = new JWebClient();
 
if($client->__get('mobile')) {
 echo '<div class="mobile_class" >';
} else {
 echo '<div class="desctop_class" >';
}
Записан
kik84
Живу я здесь
******

Репутация: +59/-4
Offline Offline

Сообщений: 1307



« Ответ #3 : 16.08.2014, 13:40:06 »

Тоже, как вариант:
Код
jImport('joomla.application.web.webclient'); 
$client = new JWebClient();
 
if($client->__get('mobile')) {
 echo '<div class="mobile_class" >';
} else {
 echo '<div class="desctop_class" >';
}

Не совсем понял, допустим, надо, чтобы в мобильнике шрифт был не 16px, а 12px.
В стилях это так:
Показать текстовый блок

Т.е. тогда так?
  echo '<div  class="mobile_body" >';
а во второй:
  echo '<div class="desctop_body" >';
и то, что в стилях сейчас просто в .body перенести в desctop?
Записан
kik84
Живу я здесь
******

Репутация: +59/-4
Offline Offline

Сообщений: 1307



« Ответ #4 : 16.08.2014, 13:41:18 »

как вариант
определять мобилку с помощью этого
и далее ставить условие вроде
Код
if( $detect->isMobile() ){
//тут подключаем стили для мобилки
}else{
//подключаем обычные стили
}
 

А в шаблоне вывод такой в head
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

Эту строку надо убрать и оформить через if и else?
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Offline Offline

Сообщений: 1250


« Ответ #5 : 16.08.2014, 14:29:30 »

<body class="mobile-class">
или
<body>
Общие стили пишете для body{}
переопределенные стили для body.mobile-class{}

Тот вариант, который я привел выше можно применят ко всему шаблону или отдельным блокам (модулям)
Можно сделать по другому:
Код
// php-код разместите в начале страницы после defined('_JEXEC') or die;
...
$mobail_class = "";
if($client->__get('mobile')) {
$mobail_class =  ' class="mobile_class" ' ;
}
 

А в нужном месте для (body или другого контейнера div) прописать:
Код
<div<?php echo $mobail_class; ?>>

Если там уже есть класс, то немножко по другому)) сами сообразите))

п.с. А самое простое - определить стили для мобил на уровне CSS c помощью @media
« Последнее редактирование: 16.08.2014, 14:34:32 от fbr » Записан
kik84
Живу я здесь
******

Репутация: +59/-4
Offline Offline

Сообщений: 1307



« Ответ #6 : 16.08.2014, 16:37:52 »

Пока все работает только через:
@media only screen and (max-device-width: 600px) {
...
   }

Если пробовать через PHP, то итог один -белый экран)
Записан
midav
Живу я здесь
******

Репутация: +113/-1
Offline Offline

Пол: Мужской
Сообщений: 946



« Ответ #7 : 16.08.2014, 19:31:36 »

Если пробовать через PHP, то итог один -белый экран)
Значит есть ошибки в синтаксисе PHP . Включите отображение ошибок и смотрите что неправильно .
А в принципе, чем не устраивает вариант через media правила ?
Записан
serjik
Давно я тут
****

Репутация: +1/-1
Offline Offline

Сообщений: 338


« Ответ #8 : 01.10.2016, 01:49:30 »

Друзья, аналогичная проблема которую не удается решить. В мобильной версии нужно чтоб шрифт становился меньше чем на основном сайте, но он не становиться из за чего блоки с текстом расползаются. Есть файл mobil.css где пробовал прописать свой размер шрифта но текст все равно берет его из основного файла . Как заставить его в мобильной версии "ужаться" ? советы данные выше с php вставками в шаблон не работают, а только выводят сайт из строя.
сайт: http://kreator-av.ru
« Последнее редактирование: 01.10.2016, 02:04:33 от serjik » Записан
beliyadm
Профи
********

Репутация: +1566/-61
Offline Offline

Пол: Мужской
Сообщений: 8110


Севастополь == Россия


« Ответ #9 : 01.10.2016, 02:16:04 »

Зачем вы городите огород, есть же медиа квери - для любого разрешения можно сделать свои условия стилей
Записан
serjik
Давно я тут
****

Репутация: +1/-1
Offline Offline

Сообщений: 338


« Ответ #10 : 01.10.2016, 02:34:38 »

Зачем вы городите огород, есть же медиа квери - для любого разрешения можно сделать свои условия стилей

пробовал я использовать такой вариант прописывая вверху файла template.css такой кусок кода:
Код:
@media screen and (max-width: 640px) {
 HTML,body {width:50%;margin:0;padding:0;font-family:Arial narrow, sans-serif;}
   }
но он почему то ничего не меняет.

« Последнее редактирование: 01.10.2016, 02:44:03 от serjik » Записан
Cola-Web
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #11 : 01.10.2016, 20:58:08 »

Медиа запросы прописываются в конце файла стилей.
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6461



« Ответ #12 : 01.10.2016, 21:00:59 »

Медиа запросы прописываются в конце файла стилей.
либо после медиа max-width: 640px обязательно доолжно быть перекрывающее медиа min-width: 641px, что кстати является рекомендацией Google
Записан
serjik
Давно я тут
****

Репутация: +1/-1
Offline Offline

Сообщений: 338


« Ответ #13 : 03.10.2016, 00:57:46 »

Медиа запросы прописываются в конце файла стилей.
а можно пример? извините, но как бы я не прописывал указанный выше кусок кода размер шрифта от этого никак не меняется ((
Записан
serjik
Давно я тут
****

Репутация: +1/-1
Offline Offline

Сообщений: 338


« Ответ #14 : 05.10.2016, 01:18:04 »

Разобрался, почти получилось!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet