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

Откройте шаблоны вашего стиля и найдите шаблон под названием 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!

Скриншоты:


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

 

ragtek написал аддон, который избавит от манипуляций с шаблонами. Ждём релиза

 

Я так понимаю аддон и поныне в ожидании?

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

 

Хак на самом деле имеет много минусов и его нужно серьёзно доработать. Как появится силы и время на это дело - обновлю. Пока не советую ставить его на живые форумы, если плохо разбираетесь в css.

 

Так надо просто делать mobilestyle, который будет универсален и нормально отображаться на мобилках. А от аддона надо только определять useragent и менять шаблон в соответствии с ним

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

 

Ну так делают XF Mobile Style =) И есть адон для переключение стиля при заходе с мобильных устройств =) Но хочется как минимум как у ipb =)

 

CyberAP
Красава! Супер работа!

 

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

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

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

 

Идей полно, но ничего обещать не буду.