Портретная и альбомная ориентация

На телефоне поворот экрана меняет только форму холста. На планшете — переключает весь интерфейс между мобильным и компьютерным.

Задача

Понять, что именно меняется при повороте телефона или планшета — и почему на планшете это иногда выглядит неожиданно.

Правило одно: считается ширина экрана, а не тип устройства

«Багетка» не спрашивает, телефон перед ней или планшет. Она смотрит на ширину экрана в данный момент: до 1000 пикселей — показывается мобильный интерфейс (нижняя панель, меню по значку ☰, описанные в главе «Интерфейс на экране»), от 1001 пикселя — компьютерный (боковые панели, строка меню «Файл / Правка / Вид / Справка»). Поворот экрана меняет именно ширину — поэтому на одном и том же устройстве интерфейс может быть то мобильным, то компьютерным.

Что из этого следует

У большинства телефонов ширина экрана меньше 1000 px в любой ориентации — поэтому телефон почти всегда показывает мобильный интерфейс, и портрет/альбомная меняют только форму холста (см. ниже). А у планшетов и больших телефонов ширина в альбомной ориентации обычно переваливает за 1000 px — поэтому именно на них поворот экрана переключает весь интерфейс.

Телефон: меняется только холст

У телефона что в портретной, что в альбомной ориентации интерфейс остаётся мобильным — нижняя панель, меню по значку ☰. Меняется форма области холста: в портретной она высокая и узкая, в альбомной — низкая и широкая.

Телефон в портретной ориентации: высокий узкий холст, нижняя панель из 4 кнопок.
Рис. 1. Портретная ориентация — холст высокий и узкий.
Телефон в альбомной ориентации: широкий низкий холст, та же нижняя панель, сжатая по высоте.
Рис. 2. Альбомная ориентация — тот же интерфейс, холст шире.

В альбомной ориентации у нижней панели меньше высоты экрана, поэтому часть вертикального пространства уходит на саму панель — для длинной горизонтальной стены с несколькими рамами это обычно удобнее портретной.

В альбомной ориентации нижняя панель прячется сама

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

Чтобы вернуть панель — потяните от этой полоски вверх (как будто открываете шторку) или просто коснитесь её. Появятся и нижняя панель, и строка с меню ☰ сверху. Чтобы убрать панель обратно, потяните её вниз — или просто продолжайте работать с холстом, она не мешает.

Телефон в альбомной ориентации с раскрытой нижней панелью «Фото / Изменить / Сохранить / Чат» и видимым значком меню в правом верхнем углу.
Рис. 3. Альбомная ориентация, панель раскрыта касанием или движением вверх.

Это сделано специально, а не ошибка: в альбомной ориентации каждый лишний пиксель высоты на счету, и панель, которая нужна не постоянно, не должна всё время загораживать холст.

Планшет: меняется весь интерфейс

У типичного планшета (например, 10–11 дюймов) ширина экрана в портретной ориентации — около 800 px, то есть ниже порога в 1000 px: показывается мобильный интерфейс, как на телефоне. А в альбомной ориентации ширина вырастает примерно до 1100–1300 px — порог превышен, и «Багетка» переключается на полный компьютерный интерфейс: боковые панели настроек справа и слева, строка меню сверху, никакой нижней панели.

Планшет в портретной ориентации: мобильный интерфейс с нижней панелью, как на телефоне.
Рис. 4. Планшет, портретная ориентация — интерфейс как на телефоне.
Планшет в альбомной ориентации: полный компьютерный интерфейс с боковыми панелями настроек и строкой меню сверху.
Рис. 5. Тот же планшет, альбомная ориентация — интерфейс как на компьютере.

При этом управление холстом остаётся сенсорным в обеих ориентациях планшета: перетаскивание и «щипок» двумя пальцами работают и в компьютерном виде интерфейса — см. «Жесты пальцем». Меняется только то, как выглядят и где расположены сами настройки — не способ управления холстом.

Частая ошибка

Если на планшете внезапно пропала нижняя панель и появились боковые колонки, это не баг — экран просто стал шире 1000 px (повернули планшет или раскрыли его в режиме подставки). Поверните обратно — мобильный интерфейс вернётся.

Далее: особенности iOS и Android · к обзору раздела