---
metadata:
  - name: generator
    content: Diplodoc Platform v5.44.0
alternate:
  - https://yandex.ru/support/tasks-requester/ru/guide/mobile.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/tasks-requester/ru/llms.txt

# Адаптировать задание для мобильных устройств

<!-- source: ru/_includes/button-text.md -->
Напишите нам, если не нашли ответ в Справке. Вы можете приложить скриншоты или видео, чтобы ускорить помощь:
<!-- endsource: ru/_includes/button-text.md -->

<a class="support_btn msg" target="_blank" href="https://yandex.ru/chat?context=%7B%22entrypoint%22%3A%22%7B%5C%22page_name%5C%22%3A%5C%22guide-mobile%5C%22%2C%5C%22a_pageurl%5C%22%3A%5C%22https%3A%2F%2Fyandex.ru%2Fsupport%2Ftasks-requester%2Fru%2Fguide%2Fmobile%5C%22%7D%22%7D#/user/bb41c200-08e6-94b4-5c5b-e9694fa7b06e">Написать в чат</a>  <a class="support_btn" target="_blank" href="https://t.me/YandexTasksSupport_Bot">Написать в Telegram</a>

<!-- source: ru/guide/_includes/requester-source/html-editor-tb.md -->
{% note info %}

Справочник по настройке интерфейса описывает работу редактора HTML/JS/CSS. Вы также можете попробовать создать интерфейс задания в [Конструкторе шаблонов](https://yandex.ru/support/tasks-requester/ru/template-builder/index.md).

{% endnote %}
<!-- endsource: ru/guide/_includes/requester-source/html-editor-tb.md -->

По умолчанию задание будет доступно и для веб-версии Яндекс Заданий и для мобильного приложения.

Чтобы задание запускалось в мобильных приложениях, выполните шаги:

{% cut "Шаг 1. Убедитесь, что ваше задание подходит для мобильных устройств." %}

Не подходят для мобильных устройств:

- задания со встроенными веб-страницами (iframe)
- выделение областей на изображении;
- оценка качества видео;
- задания, где надо просматривать большие изображения;
- сравнение изображений (Side-by-side), где изображения надо на экране располагать рядом;
- задания, где надо набирать много текста.

Подойдут задания по классификации, опросники, оценка небольших текстов, модерация комментариев и другие.

{% endcut %}

{% cut "Шаг 2. Повысьте качество отображения заданий на мобильных устройствах." %}

Мы рекомендуем использовать [Конструктор шаблонов](https://yandex.ru/support/tasks-requester/ru/template-builder/index.md). С ним вам будет проще адаптировать задания для мобильных устройств.

Добавьте следующий код в блок **CSS**:

```css
@media screen and (max-width: 800px) {

 .task {
  width: 93%;

 }
 .popup__text {
  width:auto;
 }

 .field{
  white-space: normal;
  display: block;
  width: 100% !important;
 }

 br {
  display: none
 }
}

@media (pointer: coarse) {
  .field__hotkey, .inplace_instruction  {
    display: none;
  }
}
```

Этот код меняет [интерфейс задания](*task_interface) для устройств с шириной экрана менее 800 пикселей:

- умещает все элементы интерфейса на экране смартфона;
- следит, чтобы подсказки не выходили за границы экрана;
- убирает горячие клавиши;
- добавляет переносы строк у полей;
- убирает пробелы в виде пустых строк.

{% endcut %}

{% cut "Шаг 3. Посмотрите, как будет отображаться задание на мобильных устройствах." %}

{% list tabs %}

- Chrome

  1. Нажмите F12 или на правую кнопку мыши в любой части страницы и выберите пункт **Исследовать элемент**.
  1. Нажмите на значок с телефоном и планшетом, чтобы включить режим отображение для мобильных устройствах.
  1. Посмотрите, как выглядит задание на популярных мобильных платформах.

  [Подробнее в документации браузера](https://developers.google.com/web/tools/chrome-devtools/device-mode).

- Firefox

  1. Нажмите F12 или на правую кнопку мыши в любой части страницы и выберите пункт **Исследовать элемент**.
  1. Нажмите на значок с телефоном и планшетом, чтобы включить режим отображение для мобильных устройствах.
  1. Посмотрите, как выглядит задание на популярных мобильных платформах.

  [Подробнее в документации браузера](https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode).

- Opera

  1. Нажмите на правую кнопку мыши в любой части страницы и выберите пункт **Посмотреть код элемента**.
  1. Нажмите на значок с телефоном и планшетом, чтобы включить режим отображение для мобильных устройствах.
  1. Посмотрите, как выглядит задание на популярных мобильных платформах.

- Safari

  1. [Войдите в инструменты разработчика](https://support.apple.com/en-gb/guide/safari/sfri20948/mac)
  1. [Включите режим отображения для мобильных устройств.](https://support.apple.com/ru-ru/guide/safari-developer/dev84bd42758/mac)

- Яндекс Браузер

  1. Нажмите F12 или на правую кнопку мыши в любой части страницы и выберите пункт **Исследовать элемент**.
  1. Нажмите на значок с телефоном и планшетом, чтобы включить режим отображение для мобильных устройствах.
  1. Посмотрите, как выглядит задание на популярных мобильных платформах.

{% endlist %}

{% note tip %}

Если задание отображается плохо, вернитесь в блок CSS и добавьте в `@media screen and (max-width: 800px)` недостающие стили. Если вы не знакомы с языками CSS и HTML, воспользуйтесь услугами профессионалов или обратитесь в службу поддержки. Подробнее в разделе [Получить помощь с размещением заданий](https://yandex.ru/support/tasks-requester/ru/guide/troubleshooting/support.md)

{% endnote %}

{% endcut %}

{% cut "Шаг 4. При добавлении пула заданий в фильтрах включите отображение только на мобильных устройствах." %}

<!-- source: ru/guide/_includes/requester-source/filter-client-about.md -->
Задания в пулах по умолчанию будут доступны для веб-версии Яндекс Заданий и мобильного приложения. Если вы хотите изменить настройки по умолчанию и ограничить видимость задачи для любой из версий, добавьте фильтр **Клиент** и выберите нужное значение: **Веб-версия Яндекс Заданий** или **Мобильные Яндекс Задания**.
<!-- endsource: ru/guide/_includes/requester-source/filter-client-about.md -->

![](_images/interface-configuration/filters_web+apps.png)

{% endcut %}

## Что дальше {#what-next}

- [Создайте пул заданий в проекте](https://yandex.ru/support/tasks-requester/ru/guide/pool-main.md).
- Узнайте больше про настройку [проекта](*project):

    - [Написание инструкции](https://yandex.ru/support/tasks-requester/ru/guide/instructions.md).
    - [Входные и выходные данные](https://yandex.ru/support/tasks-requester/ru/guide/incoming.md).
    - [Интерфейс задания](https://yandex.ru/support/tasks-requester/ru/guide/spec.md).
    - [Настройка контроля качества](https://yandex.ru/support/tasks-requester/ru/guide/project-qa.md).

<!-- source: ru/guide/_includes/contact-support.md -->
<!-- source: ru/_includes/btn-style.md -->

<!-- endsource: ru/_includes/btn-style.md -->

[Написать в службу поддержки](https://yandex.ru/support/tasks-requester/ru/guide/troubleshooting/support.md){.support_btn}
<!-- endsource: ru/guide/_includes/contact-support.md -->

<!-- source: ru/_includes/image-styles-internal.md -->

<!-- endsource: ru/_includes/image-styles-internal.md -->

[*task_interface]: <!-- source: ru/guide/_includes/glossary/task-interface/term.md -->
Внешний вид задания для исполнителя и логика обработки ответов. Чаще всего настраивается с помощью [конструктора шаблонов](https://yandex.ru/support/tasks-requester/ru/template-builder/index.md).
<!-- endsource: ru/guide/_includes/glossary/task-interface/term.md -->

[*project]: <!-- source: ru/guide/_includes/glossary/project/term.md -->
Определенная цель для разметки. Например, модерация комментариев, классификация изображений, транскрипция аудиозаписей или еще что-то.
<!-- endsource: ru/guide/_includes/glossary/project/term.md -->

[Подробнее](https://yandex.ru/support/tasks-requester/ru/glossary.md#project)