1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Добавляем поддержку мобильных браузеров (iPhone)

Тема в разделе "Модификации шаблонов", создана пользователем CyberAP, 29 май 2011.

Загрузка
  1. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Откройте шаблоны вашего стиля и найдите шаблон под названием PAGE_CONTAINER
    Там найдите:
    PHP:
        <meta charset="utf-8" />
    И замените на:
    PHP:
        <meta charset="utf-8" />
        <
    meta name "viewport" content "width = device-width, user-scalable = no" />
    Найдите далее:
    PHP:
        <!--XenForo_Require:CSS-->
    Замените на:
    PHP:
        <!--XenForo_Require:CSS-->

        <
    link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css.php?css=iphone&amp;style={xen:urlencode $_styleId}&amp;d={$visitorStyle.last_modified_date}/>
    Затем опять открываем шаблоны вашего стиля и нажимаем на кнопку + Создать новый шаблон
    В название шаблона вводим iphone.css
    В содержание вставляем этот код: (удостоверьтесь что добавляете шаблон в нужный стиль)
    Код:
    /*general */
    
    html
    {
        width: 480px;
        margin: 0 auto;
    }
    
    .pageWidth
    {
        min-width: 0;
        margin: 0;
    }
    
    /* navigation */
    
    .navTabs
    {
        border-radius: 0;
        border-left-style: none;
        border-right-style: none;
    }
    
    .navTabs .visitorTabs
    {
        display: none; /* have no idea where to put this ATM */
    }
    
    /* breadcrumbs */
    
    .breadBoxTop, .breadBoxBottom
    {
        margin-right: 0;
        margin-left: 0;
    }
    
    /* content */
    
    .mainContainer
    {
        float: none;
        margin: 0;
    }
    
    .mainContent
    {
        margin: 0;
        padding: 0;
    }
    
    #content .pageContent
    {
        padding-left: 6px;
        padding-right: 6px;
    }
    
    .node .nodeText
    {
        margin-right: 210px;
    }
    
    .node .nodeControls
    {
        right: 190px;
    }
    
    .node .nodeLastPost
    {
        width: 160px;
    }
    
    /* message */
    
    .messageUserInfo
    {
        width: 67px;
    }
    
    .messageUserBlock div.avatarHolder
    {
        padding: 6px;
    }
    
    .avatar .img.m
    {
        width: 48px;
        height: 48px;
        background-size: cover;
        background-position: 0 0;
    }
    
    .message .messageInfo, #QuickReply
    {
        margin-left: 82px;
    }
    
    /* sidebar */
    
    .sidebar
    {
        width: 468px;
        float: none;
        padding: 0;
    }
    
    .sidebar .section
    {
        width: 232px;
        display: inline-block;
        vertical-align: top;
    }
    
    /* search + forms */
    
    #QuickSearch
    {
        top: -90px;
        padding: 3px;
    }
    
    .formPopup
    {
        width: 100%;
    }
    
    .formPopup .primaryControls
    {
        padding: 0;
    }
    
    .formPopup .textCtrl, .formPopup .button
    {
        width: 241px;
    }
    
    .formPopup .secondaryControls
    {
        padding: 0;
    }
    
    /* footer */
    
    .footer .pageContent
    {
        border-radius: 0;
    }
    
    /* popup */
    
    .xenOverlay, .xenOverlay.chooserOverlay
    {
        width: 480px !important;
    }
    
    .xenOverlay #jumpMenu .jumpMenuColumn
    {
        width: 100% !important;
    }
    Сохраняем шаблон. Вот и всё! Можно проверять на iPhone!

    Скриншоты:
    1.png 2.png 3.png

    Демо как всегда тут: http://cyberap.ru/demo/misc/style?style_id=18
    Пароль и логин: demo
     
    Oleg-2012, RedCobra, arelav и 5 другим нравится это.
  2. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    ragtek написал аддон, который избавит от манипуляций с шаблонами. Ждём релиза :)
     
    Oleg-2012 и arelav нравится это.
  3. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
    Я так понимаю аддон и поныне в ожидании?

    Хак хороший для айфона, но для андроидов с экраном 800х480 как сто становится хуже чем было =)
     
  4. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Хак на самом деле имеет много минусов и его нужно серьёзно доработать. Как появится силы и время на это дело - обновлю. Пока не советую ставить его на живые форумы, если плохо разбираетесь в css.
     
    Oleg-2012 и KaKTyS нравится это.
  5. Mr. Brightside

    Mr. Brightside Read only

    Регистрация:
    17.02.11
    Сообщения:
    156
    Симпатии:
    58
    Так надо просто делать mobilestyle, который будет универсален и нормально отображаться на мобилках. А от аддона надо только определять useragent и менять шаблон в соответствии с ним :)

    З.Ы. Ведь ничего лучше ещё не придумали?
     
  6. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
    Ну так делают XF Mobile Style =) И есть адон для переключение стиля при заходе с мобильных устройств =) Но хочется как минимум как у ipb =)
     
  7. RedCobra

    RedCobra Read only

    Регистрация:
    09.12.11
    Сообщения:
    74
    Симпатии:
    2
    Версия XF:
    1.1.3
    CyberAP
    Красава! Супер работа!
     
  8. Oleg-2012

    Oleg-2012 Местный

    Регистрация:
    21.04.12
    Сообщения:
    646
    Симпатии:
    267
    На iPad это работает 100% (Проверял на дефолтном стиле, немного подкорректированным мной), а вот не некоторых смартфонах, отображается нормально, НО разрешение выходит за пределы экрана, в принципе жить можно, но не удобно...

    По моему мнению это самый нормальный способ для для мобильника, мобильный стиль не всегда хорошо, так, как много там чего переделывать под себя нужно, а tapatalk не удобный, т.к. много ли людей будет устанавливать приложения и тем более платить ?

    CyberAP, а есть ещё идеи ?
     
  9. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Идей полно, но ничего обещать не буду.
     
    Oleg-2012 нравится это.

Поделиться этой страницей