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

Добавляем поддержку мобильных браузеров (iPhone)
Совместимость с 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!

Скриншоты:
drift-13_ss5.jpg drift-13_ss6.jpg drift-13_ss7.jpg

Демо как всегда тут:

Пожалуйста, войдите или зарегистрируйтесь для просмотра текста.


Пароль и логин: demo
Автор
android88
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок