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

Тема в разделе "Как сделать...", создана пользователем almen, 3 июл 2014.

  1. almen

    almen Создатель

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

    А ларчик открывался просто при помощи мединыйх запросов. Тема закрыта.
     
    Последнее редактирование модератором: 16 июл 2014
  2. Serafimer

    Serafimer Создатель

    Заблокирован
    Регистр.:
    24 апр 2014
    Сообщения:
    36
    Симпатии:
    17
    Кто ты такой чтобы закрывать тему? Во-первых в плане медийных запросов имеется ввиду http://htmlbook.ru/css/value/media То есть для каждого размера экрана прописать своё CSS-правило. Но так как вопрос задан в разделе PHP, то PHP этого не умеет, так как браузер в header не передаёт ничего такого. Отсюда вывод - сделать можно только на JavaScript - определить разрешение экрана и тут же перезугрузить страницу, отправив разрешение на сервер.
     
  3. MadChild

    MadChild Постоялец

    Регистр.:
    23 янв 2013
    Сообщения:
    72
    Симпатии:
    5
    Как вариант получить $_SERVER, регулярками проанализировать через какой браузер зашел пользователь, ну а далее вывести что надо :)

    WebAsyst ?!
     
    Последнее редактирование модератором: 16 июл 2014
  4. kadurinho

    kadurinho

    Регистр.:
    21 июн 2011
    Сообщения:
    601
    Симпатии:
    242
    есть одна функция в одном из движков, проверка осуществляется следующим образом

    Код:
    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;
    }
     
  5. m1ko

    m1ko Создатель

    Регистр.:
    15 авг 2010
    Сообщения:
    42
    Симпатии:
    3
    Ребят это в 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;} /* боковая колонка исчезает */
    }
    Это пример, по примеру класс или ид шапки подставь и напиши что тебе нужно. Надеюсь помог)
     
  6. MadChild

    MadChild Постоялец

    Регистр.:
    23 янв 2013
    Сообщения:
    72
    Симпатии:
    5
    а если я сижу с телефона в экраном FullHD?! тогда ваш метод не подходит
     
  7. m1ko

    m1ko Создатель

    Регистр.:
    15 авг 2010
    Сообщения:
    42
    Симпатии:
    3
    если у вас будет разрешение большое откроется стандартная версия шапки? в чем проблема то?
     
  8. MadChild

    MadChild Постоялец

    Регистр.:
    23 янв 2013
    Сообщения:
    72
    Симпатии:
    5
    В данном случае, по первому сообщению, проблем нет..(не много забыл суть темы)
    а если вообще надо для мобильного показать один баннер, для ПК другой, то уже не подойдет такой способ
     
  9. almen

    almen Создатель

    Регистр.:
    5 авг 2007
    Сообщения:
    39
    Симпатии:
    3
    все правильно, проблему решил только настройками в CSS. Вопрос был задан в разделе ПХП, потому что до этого не знал какими средствами можно решить проблему. А тему закрыл для себя и для других людей, дабы время не теряли (без имперских замашек). Если кого обидел, то ненароком.
     
  10. Mr. Brightside

    Mr. Brightside

    Регистр.:
    19 янв 2010
    Сообщения:
    478
    Симпатии:
    70
    Делать нужно адаптивно и не на PHP, а ср-вами CSS, потому что:
    • У могильных устройств разрешения экранов разные
    • У тех же могильных устройств на андройде поворот экрана при котором сайт открылся в одном разрешении, а потом юзверь перевернул дисплей, и разрешение уже другое.
    • Такие дела делаются ср-вами юзерагента, а не с участием сервера.
     
    m1ko нравится это.