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

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

  1. android88
    Совместимость с XenForo:
    • XenForo 1.2
    • XenForo 1.3
    • XenForo 1.4
    • XenForo 1.5
    Откройте шаблоны вашего стиля и найдите шаблон под названием 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!

    Скриншоты:
    Посмотреть вложение 1591Посмотреть вложение 1592Посмотреть вложение 1593

    Демо как всегда тут: http://cyberap.ru/demo/misc/style?style_id=18
    Пароль и логин: demo

    Изображения

    1. 1 (3).png
    2. 2 (3).png
    3. 3 (3).png
Поделиться этой страницей в