смена шапки сайта в мобильной версии

[almen]

Сайт на joomla 2.5, шаблон создан при помощи Artisteer 4.2. Шапка сайта- статическая картинка ширина 1000px, что очень неудобно при просмотре на мобильных устройствах. Возможно ли при помощи скрипта на PHP организовать замену одной картинки (позиция в шаблоне создана) на другую по заданному размеру окна броузера, например меньше, чем 480х320px. Если да, то подскажите плис вариант, т.к. сам в программировании не силен.

А ларчик открывался просто при помощи мединыйх запросов. Тема закрыта.

 

[Serafimer]

А ларчик открывался просто при помощи мединыйх запросов. Тема закрыта.

Кто ты такой чтобы закрывать тему? Во-первых в плане медийных запросов имеется ввиду Для просмотра ссылки Войди или Зарегистрируйся То есть для каждого размера экрана прописать своё CSS-правило. Но так как вопрос задан в разделе PHP, то PHP этого не умеет, так как браузер в header не передаёт ничего такого. Отсюда вывод - сделать можно только на JavaScript - определить разрешение экрана и тут же перезугрузить страницу, отправив разрешение на сервер.

 

[MadChild]

Как вариант получить $_SERVER, регулярками проанализировать через какой браузер зашел пользователь, ну а далее вывести что надо

WebAsyst ?!

 

[HeadHunter]

есть одна функция в одном из движков, проверка осуществляется следующим образом

function detectPDA(){
    $container = $_SERVER['HTTP_USER_AGENT'];
    $useragents = array (
        'iPhone','iPod',"Elaine/3.0","Palm","EudoraWeb","Blazer","AvantGo","Windows CE","Cellphone","Small","MMEF20","Danger","hiptop"
        ,"Proxinet","ProxiNet","Newt","PalmOS","NetFront","SHARP-TQ-GX10","SonyEricsson","SymbianOS","UP.Browser"
        ,"UP.Link","TS21i-10","BlackBerry","MOT-V",'portalmmm','Nokia','DoCoMo','Opera Mini'
        ,"Palm" ,"Handspring","Nokia","Kyocera","Samsung","Motorola","Mot" ,"Smartphone","Blackberry"
        ,"WAP","PlayStation Portable","LG","MMP","OPWV","Symbian","EPOC"
        ,"Android");
        $pda = false;
        foreach ( $useragents as $useragent ) {
            if (preg_match("@{$useragent}@i",$container)){
                $pda = false;
                break;
            }
        }
        return $pda;
}

 

[m1ko]

Ребят это в CSS даже сделать можно, при определенном размере полностью CSS содержание определенного класса или идентификатора менять)) загуглите)
Это на много проще чем в php лесть и все ровно прописывать что-то, так просто поправить CSS.

Сам этим не занимался но знаю что это очень легко.

@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
  .content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}

@media (max-width: 930px) and (min-width: 470px) {  /* для разрешения экрана от 470 до 930 пикселей */
  aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}

@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
  body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
  aside {display: none;} /* боковая колонка исчезает */
}

Это пример, по примеру класс или ид шапки подставь и напиши что тебе нужно. Надеюсь помог)

 

[MadChild]

Ребят это в CSS даже сделать можно, при определенном размере полностью CSS содержание определенного класса или идентификатора менять)) загуглите)
Это на много проще чем в php лесть и все ровно прописывать что-то, так просто поправить CSS.

Сам этим не занимался но знаю что это очень легко.

@media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
  .content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}

@media (max-width: 930px) and (min-width: 470px) {  /* для разрешения экрана от 470 до 930 пикселей */
  aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}

@media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
  body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
  aside {display: none;} /* боковая колонка исчезает */
}

Это пример, по примеру класс или ид шапки подставь и напиши что тебе нужно. Надеюсь помог)

а если я сижу с телефона в экраном FullHD?! тогда ваш метод не подходит

 

[m1ko]

а если я сижу с телефона в экраном FullHD?! тогда ваш метод не подходит

если у вас будет разрешение большое откроется стандартная версия шапки? в чем проблема то?

 

[MadChild]

В данном случае, по первому сообщению, проблем нет..(не много забыл суть темы)
а если вообще надо для мобильного показать один баннер, для ПК другой, то уже не подойдет такой способ

 

[almen]

все правильно, проблему решил только настройками в CSS. Вопрос был задан в разделе ПХП, потому что до этого не знал какими средствами можно решить проблему. А тему закрыл для себя и для других людей, дабы время не теряли (без имперских замашек). Если кого обидел, то ненароком.

 

[Mr. Brightside]

Сайт на joomla 2.5, шаблон создан при помощи Artisteer 4.2. Шапка сайта- статическая картинка ширина 1000px, что очень неудобно при просмотре на мобильных устройствах. Возможно ли при помощи скрипта на PHP организовать замену одной картинки (позиция в шаблоне создана) на другую по заданному размеру окна броузера, например меньше, чем 480х320px. Если да, то подскажите плис вариант, т.к. сам в программировании не силен.

Делать нужно адаптивно и не на PHP, а ср-вами CSS, потому что:

• У могильных устройств разрешения экранов разные
• У тех же могильных устройств на андройде поворот экрана при котором сайт открылся в одном разрешении, а потом юзверь перевернул дисплей, и разрешение уже другое.
• Такие дела делаются ср-вами юзерагента, а не с участием сервера.