Adapt a task for mobile devices
By default, the task is published only in the web version.
To run the task on mobile apps, follow these steps:
- Tasks with embedded web pages (iframes).
- Area selection on the picture.
- Video quality rating.
- Tasks where you need to view large images.
- Comparing images side-by-side, where images should be placed next to each other on the screen.
- Tasks where you need to type a lot of text.
- Accommodates all interface elements on the smartphone screen.
- Makes sure that the hints don't go beyond the screen.
- Removes keyboard shortcuts.
- Adds line breaks for fields.
- Removes empty rows.
- Press F12 or right-click anywhere on the page and choose Inspect.
- Click the phone and tablet icon to enable display mode for mobile devices.
- See what the task looks like on popular mobile platforms.
- Press F12 or right-click anywhere on the page and choose Inspect.
- Click the phone and tablet icon to enable display mode for mobile devices.
- See what the task looks like on popular mobile platforms.
- Right-click anywhere on the page and choose Inspect element.
- Click the phone and tablet icon to enable display mode for mobile devices.
- See what the task looks like on popular mobile platforms.
- Press F12 or right-click anywhere on the page and choose Inspect.
- Click the phone and tablet icon to enable display mode for mobile devices.
- See what the task looks like on popular mobile platforms.
Step 1. Make sure that your task is suitable for mobile devices.
The following tasks aren't suitable for mobile devices:
Step 2. Improve the display quality for tasks shown on mobile devices.
We recommend that you use the Template Builder. It will make it easier for you to adapt your tasks for mobile devices.
Add the following code to the CSS block:
@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;
}
}
This code changes the task interface for devices with the screen width of less than 800 pixels:
Step 3. Check how the task will be displayed on mobile devices.
Tip. If the task doesn't display well, go back to the CSS block and add the missing styles to
@media screen and (max-width: 800px)
. If you aren't familiar with the CSS and HTML languages, use professional services or contact support. For more information, see Get help creating a project.Step 4. When adding a task pool, enable display on mobile devices in filters.
To run the task simultaneously in the web version and in mobile apps, add a filter:
To make a task available only in mobile apps, add the filter Client = Mobile Toloka.
What's next
- Create a task pool in the project.
- Learn more about how to set up a project: