Experimental:Это экспериментальная технология Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Ориентация экрана не идентична ориентации устройства. Даже если устройство не способно определить своё положение в пространстве — экран может всегда. А когда устройство знает свою ориентацию, хорошо бы иметь возможность управлять ориентацией экрана для сохранения или адаптации интерфейса веб-приложения.
Управление ориентацией экрана доступно в CSS и JavaScript. Например, использование медиавыражений позволяет контенту адаптироваться с помощью CSS в зависимости от того, в каком режиме просмотра находится браузер: альбомный (горизонтальный, когда ширина экрана больше высоты) или портретный (вертикальный, высота экрана больше ширины).
Для определения положения экрана и его блокировки можно воспользоваться JavaScript Screen orientation API.
Настройка раскладки содержимого по ориентации экрана
Допустим вы хотите связать отображение содержимого с ориентацией экрана. Например, добавить панель, растягивающуюся по наибольшему направлению дисплея устройства. Это довольно просто реализовать с помощью медиавыражений.
Пример. Имеется HTML страница:
Теперь разберёмся с поведением страницы в различных случаях ориентации.
Портретный режим просмотра
Альбомный режим просмотра
Примечание: Медиавыражение по ориентации ссылается на окно браузера (соотношение его размеров), а не на ориентацию устройства.
Блокировка ориентации экрана
Некоторые устройства (в основном мобильные) могут изменять ориентацию экрана в соответствии с ориентацией самого устройства для удобства восприятия информации пользователем. Это хорошо подходит для текста, но на некоторое содержимое такое поведение может оказать негативное воздействие. Например, это трагичная ситуация для игры, разработанной под определённую ориентацию.
Урегулировать вопрос, связанный с изменением положения экрана, поможет интерфейс Screen Orientation API.
Отслеживание изменения ориентации
Запрещаем поворот экрана
В то же время, событие orientationchange (en-US) может возникнуть в момент блокировки ориентации, если для удовлетворения заданному параметру блокировки изменяется положение экрана.
Firefox OS и Android: блокирование ориентации через манифест
Для Firefox OS и Firefox Android (скоро заработает и в десктопном Firefox) существует более специфичный способ: в файле манифеста вашего приложения можно указать ориентацию:
Книжная и альбомная ориентация в мобильных интерфейсах
12 Ноя 2012, 14:00, написал Максим Шайхалов в разделе «Интерфейс»
Как правило встроенный акселерометр используется лишь для изменения ориентации экрана вашего мобильного устройства. Однако это лишь часть используемых возможностей.
И тем не менее разработка приложениях для различной ориентации требует вдумчивого проектирования. Эта функция должна быть уместна и максимально понятная пользователю.
Большинство приложений на данный момент использует или будет использовать различную ориентацию. В этой статье будут освещены основные понятия необходимые для работы с разной ориентацией.
Использование ориентации для вызова второго экрана
Приложение от YouTube наглядно демонстрирует эту функцию. В портретном режиме у пользователя есть много возможностей по управлению видео и учетными записями. В альбомном же режиме удобно управлять воспроизведением и смотреть видео. После окончания просмотра приложение изменяет ориентацию на портретную что вынуждает пользователя перейти к поиску новых видео.
YouTube в разных режимах.
Но не всегда изменение ориентации работает так продуманно. В CardMunch (визитки в LinkedIn) пользователи могут конвертировать фото визитки в контакт в адресной книге. В альбомном режиме полностью меняется интерфейс представления карт.
В альбомном режиме нет никаких подсказок и ограничено управление. Невозможно, к примеру, добавить новые карточки или же изменить существующие. В итоге, эта карусель вызывает лишь раздражение и недоумение.
CardMunch. Отсутствие визуальных подсказок в альбомной ориентации.
Модели поведения интерфейсов
В помощь UX-специалистам я разделил модели поведения интерфейса на 4 типа.
Текучий
Интерфейс меняется в зависимости от размеров экрана.
В Skype иконки меняю свое положение в зависимости от ориентации.
Pocket’s: одинаковая сетка, разная ширина.
Расширяющий
В этой модели интерфейс не только подстраивается по размер экрана, но и добавляет или убирает новые элементы. К примеру в IMDb для IPad в альбомном режиме используется широкая область для просмотра фильмографии. В портретной же ориентации этот список доступен только после нажатия дополнительной кнопки.
Обеспечение функциональности в любой ориентации дает пользователю комфорт. И вместе с тем позволяет пользоваться приложением при любой ориентации не принуждая держать устройство определенным образом.
Дополняющий
При использовании этой модели изменение ориентации вызывает альтернативный экран. К примеру, финансовое приложение. В вертикальной ориентации информация отображается таблицей, а в горизонтальной графиком.
Основной и дополнительный интерфейс в финансовом приложении.
Непрерывный
Изменение ориентации позволяет получить доступ к дополнительному интерфейсу. При этом функциональность предыдущего интерфейса сохраняется в новом. Например, приложение-пульт от ТВ. В альбомной ориентации открывается список каналов с сохранением функциональности по настройке, записи и просмотру каналов.
Программа передач в Smart Remote.
Определение ориентации по умолчанию
Above & Beyond интерактивное приложение-книга для Айпада о жизни и творчестве карикатуриста John Kascht. Насладиться карикатурами мы можем как в портретном так и в альбомном варианте. Однако горизонтальный режим показывает больше значимых и функциональных элементов. Вертикальная ориентация является дефолтной в Айпаде и перенос функциональных элементов в горизонтальную может сбить пользователей с толку.
Отсутствие управляющих элементов в вертикальной ориентации.
И в тоже время на планшетах Android, Windows 8, Playbook BlackBerry, ориентация по умолчанию — альбомная. Поэтому всегда стоит помнить о ориентации по умолчанию на том или ином устройстве.
Контекст использования
Используя различную экранную ориентацию можно значительно облегчить пользователю работу с кулинарной книгой. В портретной ориентации пользователь ищет рецепт. В альбомной ориентации начинается процесс готовки. В альбомной ориентации открывается удобный интерфейс с большими кнопками, отключается затемнение экрана, камера начинает воспринимать управляющие жесты (это поможет избежать прикосновения к экрану грязными пальцами).
Поваренная книга Бетти Крокер отличный пример правильного использования ориентации.
Визуальные подсказки о режимах ориентации
Дополнительная функциональность или экран могут быть непонятны. Если не дать пользователю подсказку, то та или иная функциональность может быть упущена. Например, классический калькулятор Айфона при смене ориентации может меняться на инженерный.
Визуальные подсказки могут значительно облегчить понимание интерфейса. Смотрим примеры.
Заголовок приложения
Положение заголовка может дать подсказку о дополнительной функциональности при смене ориентации.
Иконка
Есть много универсальных значков, например универсальный значок Share или кнопка Action у Apple. Поэтому предлагаю использовать специальную иконку для указания возможности смены ориентации. Его можно скачать пользоваться бесплатно.
Иконка появляется в любое время и используется как переключатель. Пользователю нет необходимости переворачивать экран, но иконка будет напоминать о возможности дополнительной функциональности.
Изменение кнопки в заголовке окна.
Иконка может работать и как индикатор ориентации.
Примечание: Идея не проверена и минусом такого решения является загромождение интерфейса. И в тоже время идея поможет расширить применение режимов ориентации и расширить их применение.
Шторка
Идея проста и заключается в показе некоего элемента при сдвиге которого будет показываться альтернативный экран.
Заключение
Проектирование интерфейсов с использованием ориентации не ново. К примеру, в альбомном режиме смартфоны открывают большую клавиатуру, а а почта перейдет на Master–detail интерфейс. Но такое проектирование в первую очередь идет как дополнение к основному интерфейсу. А пользователи, которые используют дефолтную ориентации часто и не догадываются о таких возможностях. Добавив простые подсказки дизайнеры интерфейсов могут сделать свои продукты еще понятнее и удобней.
В этой статье расскажем, как изменить ориентацию дисплея компьютера на альбомную или книжную с помощью меню «Экран» или сочетаний клавиш.
Как развернуть экран при помощи параметров в Windows 10
Если вы приобрели новый дополнительный монитор для своего компьютера и хотите, чтобы он был в портретной ориентации, а не в альбомной или вы разыгрываете кого-то в офисе (или может быть вас разыграли) и ваш экран внезапно перевернулся, эта статья поможет узнать, как быстро изменить ориентацию дисплея. Вот безошибочный способ повернуть экран в удобную для вас ориентацию.
1. Кликаем кнопку «Пуск» и выбираем «Параметры». Или сразу щелкаем правой кнопкой мыши по рабочему столу и выбираем пункт «Параметры экрана».
Как альтернативный вариант, вы можете нажать «Win + X» на клавиатуре для вызова меню быстрых ссылок, а затем выбрать «Параметры»:
2. В окне параметров выбираем пункт «Система»:
3. По умолчанию уже выбрано меню «Дисплей»:
4. В разделе «Ориентация дисплея» можно щелкнуть по выпадающему списку и выбрать один из вариантов — «Книжная», «Альбомная», «Альбомная (перевернутая)», «Книжная (перевернутая)».
«Книжная» — это горизонтальная ориентация, которая используется по умолчанию.
«Альбомная» — разворачивает экран на 270 градусов, т.е. делает его вертикальным. Этот режим удобно использовать в программировании или для просмотра длинных по вертикали документов.
«Альбомная (перевернутая)» — это горизонтальный, но перевернутый режим.
«Книжная (перевернутая)» — аналогично, вертикальный и перевернутый.
5. Ваш экран будет изменен на выбранную вами ориентацию, при этом появится сообщение с подтверждением. Здесь можно выбрать либо «Сохранить», если это новая ориентация, либо «Отменить изменения», чтобы вернуться в предыдущий режим.
Как повернуть экран при помощи горячих клавиш в Windows 10
Гораздо более простой способ развернуть экран в Windows 10 — использование сочетания «горячих» клавиш. К сожалению, некоторые настройки операционной системы могут блокировать этот способ. Итак, вы можете попробовать, но не удивляйтесь, если это не сработает.
Сочетания клавиш для поворота экрана — «Ctrl + Alt + любая стрелка».
🚦 Android — любое приложение в альбомном режиме — drive2, instagram и.тд.
Привет всем! Как и обещал в своем Б/Ж — ссылка на запись.
Поведаю вам интересную информацию. Может кто-то конечно уже пользуется данным способом, но я его нашел недавно. Поехали: Многие из вас уже сталкивались с тем, что многие приложения из Google Pley запускаются исключительно для работы в вертикальном режиме экрана — drive2, instagram, blabla car, Boom, Юла, Юлмарт, CCliner и Apple Music — я перечислил те приложения которыми пользуюсь именно Я, ваш список может быть больше. Например ваш планшет или смартфон, инсталлирован в торпедо автомобиля или держится на каком-то крепеже в машине, в горизонтальном положении то возникает трудность полистать любимый драйв2 или какое-то другое приложение — во время ожидания и т.д. (речь не идет о использовании этих приложений на ходу). • Заходим в Google Play и скачиваем приложение Set Orientation — play.google.com/store/app…e.eyesfree.setorientation — оно бесплатное. • Запускаем его и видим варианты настройки — вкл/выкл, альбомная/альбомная всегда и т.д. — думаю разберетесь, сложного ничего нет. И жмем ОК — все, готово, пробуем запускать свои любимые приложения.
•Все гениальное просто — только не с приложением Apple Music( Приложение переворачивается, работает, но в определенный момент оно вылетает так как начинает усиленно сопротивляться с таким разрешением) Происходит это в тот момент когда вы тапаете по нижней части экрана — панель с названием трека которая при нажатии должна развернуться в режим плеера.
Начнем: •Скачали приложение Apple Music (или оно уже есть у вас) — play.google.com/store/app…d=com.apple.android.music • Как создать аккаунт и зарегистрировать объяснять не буду — этой инфы полно в интернете. • Открыли приложение, вошли в раздел «Медиатека» ил «Для вас», кликаете на трек или альбом и перед вами появляется вот это (см. фото).
• Для того, чтобы воспроизвести всю папку нажимаете «Воспр.» и музыка звучит или кликнув по выбранному треку, но внизу экрана опять же эта злополучная иконка трека которая зависает( и кликнув по нижней части экрана, чтобы перейти в режим плеера — приложение зависнет.
• Лечится это так — кликаете на «Воспр» или «трек» 3 раза и вы увидите как иконка в три этапа уменьшится и появится в левом нижнем углу) — теперь можно открывать и закрывать режим плеера и кликать на треки в этой папке — все будет нормально. Повторить процедуру нужно будет в новой открытой папке.
Если функция автоповорота экрана включена, то при изменении угла наклона экрана телефона будет автоматически меняться режим изображения из портретного в ландшафтный и наоборот.
Если говорить простым языком, при повороте экрана поворачивается и изображение вместе с ним.
Зачем нужно отключать автоповорот на телефоне?
А как же ориентацию переключать?
Например, есть сайт, открытый в Chrome для Android. Этот браузер позволяет менять ориентацию со стандартной (вертикальной) на альбомную. Текста при альбомной ориентации будет помещаться больше, и читать его будет удобнее (шрифт также будет масштабнее) Но как поменять ориентацию при выключенном автоповороте?
Есть два способа. Первый — на время включить автоповорот, дождаться смены ориентации, выключить автоповорот.
Второй подойдет тем людям, у которых на телефоне стоит “чистый” Android версии 9 и выше. В таком случае при повороте экрана появляется маленькая кнопочка там же, где расположены кнопки навигации. Она и предлагает повернуть экран.
Как включить датчик автоповорота в настройках
Обычно автоповорот включается в шторке уведомлений, но иногда оттуда пропадает соответствующая иконка. Чтобы включить датчик, сделайте несколько простых шагов:
1. Зайдите в «Настройки» смартфона.
2. Выберите раздел «Экран».
3. Активируйте пункт «Автоповорот экрана».
Если сбой не связан с какими-либо серьезными ошибками, то функция после этого должна заработать.
Калибровка акселерометра
За поворот экрана отвечает акселерометр, работа которого иногда нарушается физическими или программными сбоями.
Иногда калибровка акселерометра слетает после обновления MIUI.
Чтобы откалибровать акселерометр:
1. Зайдите в номеронабиратель и наберите код *#*#6484#*#*, чтобы попасть в инженерное меню.
2. Найти пункт «Accelerator» или «Accelerometer sensor».
3. Наклонять телефон в разные стороны, пока на дисплее не высветятся стрелки.
4. Положить устройство на ровную горизонтальную поверхность и нажать кнопку «Calibration».
5. Дождаться, пока система отобразит надпись «Сalibration success».
6. После этих манипуляций автоповорот должен заработать.
На новых версиях MIUI в инженерном меню есть только теты для проверки работоспособности датчиков.
Перезагрузка
Как ни банально, но зачастую избавиться от проблемы помогает обычная перезагрузка смартфона. Иногда приходится применять более радикальные меры.
Попробуйте сбросить все настройки:
В самых сложных ситуациях помогает только перепрошивка.
Если вы продвинутый пользователь, прошейте смартфон привычным для вас способом (MiFlash, ADB и др.)
Остальные пользователи могут попробовать переустановить обновление MIUI через «три точки»:
После переустановки последней версии MIUI проблема с автоповоротом часто исчезает.
Как поменять ориентацию экрана вручную
Если вы хотите управлять сменой шаблона вручную, Вам необходимо воспользоваться методами, предоставляемыми классом Configuration. Объект этого класса передается в качестве параметра в метод onConfigurationChanged, который вызывается при изменении одного из параметров, определенного атрибутами Activity в файле AndroidManifest.xml. Чтобы перехватывать смену ориентации Вам нужно задать атрибут android:configChanges в знаение orientation в файле манифеста. Если этого не сделать, то метод onConfigurationChanged не будет вызываться при смене ориентации устройства.
Блокировка ориентации экрана
Иногда нам требуется запретить смену ориентации. Например, для длинного списка предпочтительной является книжная ориентация, поскольку в этом случае на экране уместится большее количество информации. Вы можете ограничить ориентацию эерана для своей activity с помощью атрибута android:screenOrientation. Этот атрибут можно указать в AndroidManifest.xml. android_screenOrientation=”landscape” – альбомная ориентация, android_screenOrientation=”portrait” – книжная ориентация. Если Вы ограничиваете свое приложение одной ориентацией, то шаблон должен располагаться в папке res/layout.
Вступление
Когда создавались первые портативные устройства – КПК и смартфоны, то за основу бралась настольная операционная система и допиливалась под мобильное устройство. Лишние функции удалялись, а некоторые функции добавлялись. Но при этом как-то совсем упустили из виду, что в отличие от громоздких мониторов и экранов ноутбуков, карманные устройства можно вращать в руках. Первые устройства не умели менять ориентацию экрана. Некоторые программисты самостоятельно стали создавать программы, которые умели переключаться в разные режимы. Затем эту возможность стали включать в настройки аппарата. Позже аппараты научились самостоятельно определять ориентацию экрана.
Всего существует два режима – портретный и альбомный. На большинстве телефонов используется по умолчанию портретный режим (как на паспорте). Альбомный режим знаком нам по обычным мониторам.
Рассмотрим следующий случай. Предположим, у нас в приложении имеется одно текстовое поле и шесть кнопок. Вроде всё нормально.
Но стоит нам повернуть устройство на 90 градусов (для эмулятора нужно нажать комбинацию клавиш Ctrl+F11), как сразу обнаруживаются проблемы. Пятая кнопка видна частично, а шестая вообще оказалась за пределами видимости. Непорядок!
Чтобы избежать такой проблемы, необходимо как-то по другому скомпоновать кнопки. Например, расположить их не подряд друг за другом, а разбить на пары. Воспользуемся контейнером TableLayout. С его помощью мы можем разбить кнопки на две колонки и поместить их в три ряда.
Для этой операции нам понадобится сделать несколько важных шагов. Сначала нужно создать новую подпапку в папке res. Выделяем папку res, вызываем из него контекстное меню и последовательно выбираем команды New | Android resource directory. В диалоговом окне из выпадающего списка Resource type: выбираем layout. В списке Available qualifiers: находим элемент Orientation и переносим его в правую часть Chosen qualifiers: с помощью кнопки с двумя стрелками. По умолчанию у вас появится имя папки layout-port в первой строке Directory Name:. Но нам нужен альбомный вариант, поэтому в выпадающем списке Screen orientation выбираем Landscape. Теперь название папки будет layout-land.
Можно обойтись без помощи мастера, создав папку сразу через меню New | Directory. Этот способ годится для опытных разработчиков, которые знают, как следует назвать папку. Важно запомнить, что имя даётся не произвольно, а именно в таком виде layout-land. По суффиксу -land система понимает, что речь идет о новом режиме. Теперь нам осталось создать в созданной папке новый XML-файл activity_main.xml. Вызываем контекстное меню у папки layout-land и выбираем команды New | Layout Resource File. В диалоговом окне присваиваем имя activity_main.xml, которое должно совпадать с именем существующего файла. Во втором поле вводим LinearLayout, по мере ввода появится подсказка, облегчающая выбор.
Откроем созданный файл и модифицируем его следующим образом.
Запускаем приложение и проверяем. Отлично, теперь видны все кнопки. Поздравляю, вы гений!
Когда вы создаёте альтернативную разметку, то не забывайте включать все компоненты, к которым будете обращаться программно, иначе получите ошибку. Допустим, вы забыли добавить шестую кнопку. В портретном режиме программа будет работать, а когда пользователь перевернёт экран, то активность будет инициализировать все компоненты для работы, а кнопки-то и нет.
Проблемы с автоповоротом
Иногда «Ориентация» работает не корректно, либо не работает вовсе. Поворот изображения может зависать, не возвращаться в исходное положение, либо картинка может не поворачиваться вообще. Первым делом нужно проверить активацию кнопки.
Если она включена, но проблема не решена, следует исключить сбои в самом приложении. Причиной поломки может быть кратковременный сбой системы. В таком случае можно перезагрузить телефон. После этого автоповорот начинает функционировать в штатном режиме.
Если перезагрузка не помогла, то стоит сделать полный сброс настроек смартфона до заводских. Предварительно нужно выполнить резервное копирование файлов, размещенных в памяти гаджета. Возобновить ориентацию изображения поможет обновление операционной системы на актуальную версию.
Если ни один из перечисленных способов не помог решить проблему, значит нужно обратиться к специалисту, который проведет профессиональную диагностику. Либо выполнить ее самостоятельно.
Повторная активация
Установка прошивки
В редких случаях поломка автоповорота в MIUI 11 происходит в результате ошибочной установки новой версии прошивки. Вам необходимо установить полную версию.
Не волнуйтесь, операция произойдёт автоматически без потери данных, вам лишь нужно убедиться, что интернет позволит беспрепятственно скачать около 2 Гб данных и убедитесь, что аккумулятор заряжен более чем на 70%.
Стороннее приложение
Если экран всё ещё не реагирует на изменение положение телефона, остаётся констатировать поломку микросхемы с датчиком. Телефон необходимо отдать в ремонт в сертифицированный сервисный центр.
Как временное решение возможно использовать приложение Rotation Control. Оно не сможет вращать дисплей автоматически, но даст вам возможность делать это нажатием специальной кнопки.
Пример android приложения
Давайте создадим проект, в котором продемонстрируем различные способы изменения шаюлона экрана при смене ориентации. Приложение судет состоять из трех кнопок, при нажатии на которые будет открываться activity, в которой будет реализован тот или иной способ работы с ориентацией. Внутри шаблона приложения с помощью атрибута android:onClick объявим методы, которые будут вызываться при нажатии на кнопки.
Шаблон нашего приложения имеет вид: activity_main.xml
Внутри класса MainActivity определим эти методы.
Реализация автоматической ориентации экрана
Создайте файл шаблона activity_automatic.xml в папке res/layout-land. Этот файл определяет вид экрана при альбомной ориентации. layout-land/activity_automatic.xml
Аналогичный файл для книжной ориентации создадим в папке res/layout-port. Обратите внимание, что TextView имеет разные цвета.
