FANDOM


Чи знаєте ви, що близько половини відвідувань Фандому припадає на відвідування з мобільних пристроїв? Таким чином, дуже важливо переконатися, що сторінки вашої вікі добре відображаються і на мобільних пристроях теж, адже їх несумісність означає, що близько половини відвідувачів не зможуть їх прочитати. Це стосується і головних сторінок: якщо головна сторінка добре відображається на екрані комп’ютера ще не означає, що вона залишиться такою на мобільних, і безліч людей побачать зламану головну, коли зайдуть до вас на вікі.

Перевірте, як головна сторінка відображається на екрані мобільних пристроїв Редагувати

Предпросмотр в мобильном скине

Передперегляд у мобільному скині.

Перевірити те, як відображаються сторінки вікі, в тому числі й заголовна, на екрані мобільного телефону, дуже просто. Зайдіть в редагування у режимі класичного редактора, натисніть клавішу «попередній», і у верхній частині вікна виберіть «мобільний скін». Так ви побачите, як головна виглядає на екрані смартфона, і вам буде легше зрозуміти, які розділи головної там не працюють. Ця функція не працює в Новому візуальному редакторі.

Також ви можете подивитися, як будь-яка сторінка відображається в мобільному скині, додавши до адреси URL ? Useskin=wikiamobile

Найбільш часті проблеми відображення головних сторінок на екранах мобільних пристроїв Редагувати

Існує ряд проблем відображення, що найчастіше зустрічаються при перегляді з мобільних пристроїв, які значно погіршують вигляд і зручність головних при перегляді їх зі смартфона. У цьому розділі буде розказано, як їх вирішити.

Заголовки-зображення Редагувати

Заголовки у вигляді зображення, які створюються за допомогою CSS, не відображаються в мобільному скині. Якщо ви вставите їх за допомогою коду [[Файл:]], також не гарантує, що вони будуть показані правильно, часто файли некоректно відображаються в мобільному скині із-за великого розміру . Найбільш простий спосіб вирішити цю проблеми — вставити заголовок, який буде відображатися тільки на екрані мобільних. Як приклад візьмемо розділ «Welcome» з однієї англомовної вікі:

Приклад заголовка-зображення, встановленого через CSS
HTML
<H2 title="Welcome" class="mainpage-header-welcome"></h2>
CSS

.mainpage-header-welcome {     background: url("http://static.wikia.com/middleearthshadowofmordor7723/images/6/66/Mainpage-Header-Welcome.png") no-repeat scroll 0 0 transparent;     border-bottom: medium none! important;     height: 28px;     margin: 21px auto 8px 12px! important;     padding-bottom: 0px! important;     width: 99%; }

Вигляд на екрані комп’ютера
Shadow of Mordor image header


Ми можемо просто додати прихований заголовок, який не буде відображатися на екрані комп’ютера, але з’явиться в мобільному скині:

Приклад заголовка для мобільного скіна
HTML
<H2 title="Welcome" class="mainpage-header-welcome"></h2>
<H2 style="display:none;">Welcome</h2>
Тема на екрані смартфона
Shadow of Mordor image header mobile


До тегу h2 застосований стиль display:none, що дає команду браузеру не відображати його на сторінці. А мобільний скін не відображує стилі, встановлені за допомогою тегів, і текст всередині тега буде показаний. Це дуже простий спосіб, яким можна приховати деякі елементи для тих, хто переглядає сторінку вікі з комп’ютера, і в той же час показати їх на екрані мобільного. Якщо ви використовуєте заголовки-зображення, які вставлені на сторінку як файли, подумайте над тим, щоб замість цього встановити їх через CSS, а також додайте приховані заголовки, які будуть відображатися тільки на екрані мобільних.

Елементи, при створенні яких використовується JavaScript і CSS Редагувати

На багатьох вікі на головній присутні елементи, створені за допомогою JS і CSS, як правило, це різні цікаві слайдери. Вони дуже добре виглядають на екрані комп’ютера, але ламаються при перегляді з мобільного, як це показано на прикладі нижче.

Приклад того, як виглядає складний елемент на екрані комп’ютера і на екрані мобільного.


Так як користувацькі JS і CSS не завантажуються в мобільному скині, немає простого способу відобразити їх правильно для перегляду зі смартфонів. Замість цього можна заховати ці елементи, щоб вони взагалі не відображалися при перегляді з мобільного. Для цього потрібно використовувати теги <verbatim>, також необхідні знання CSS.

Щоб заховати деякі елементи і не відображати їх на екранах мобільних, створіть нову сторінку в просторі MediaWiki, а на сторінку вікі вставте їх за допомогою тега <verbatim>. Потім вставте теги <style> на сторінку MediaWiki і сховайте елементи, які не повинні відображатися на екрані мобільного, змінивши параметр «display» на «none». Щоб елемент не відображався тільки в мобільному скині, використовуйте тег «wkMobile». Наприклад, якщо ви хочете заховати елемент з класом «example», використовуйте наступний код:



Приклад використання CSS для того, щоб відключити відображення елемента в мобільному скині.
HTML
<Div class="example">Цей елемент не буде відображатися на екрані мобільного.</Div>

Сторінка MediaWiki

<Style>
.wkMobile .example {
    display: none;
}
</Style>


Теги verbatim вставлять вміст сторінки MediaWiki на головну, а налаштування CSS будуть діяти тільки при перегляді в мобільному скині. Так як використовується клас wkMobile, це ніяк не вплине на повну версію.

Див. також Редагувати

Community content is available under CC-BY-SA unless otherwise noted.