Я создаю веб-приложение для iPhone и хочу заблокировать ориентацию в портретном режиме. Это возможно? Существуют ли расширения веб-набора для этого?
Обратите внимание, что это приложение, написанное на HTML и JavaScript для Mobile Safari, это НЕ нативное приложение, написанное на Objective-C.
orientation
iphone
Kevin
источник
источник
Ответы:
Вы можете указать стили CSS на основе ориентации области просмотра: нацелить браузер с помощью body [orient = "landscape"] или body [orient = "Portrait"]
http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
Тем не мение...
Подход Apple к этому вопросу заключается в том, чтобы позволить разработчику изменять CSS в зависимости от изменения ориентации, но не полностью предотвращать переориентацию. Я нашел похожий вопрос в другом месте:
http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
источник
Это довольно хакерское решение, но это хоть что-то (?). Идея состоит в том, чтобы использовать CSS-преобразование, чтобы повернуть содержимое вашей страницы в квазипортретный режим. Вот код JavaScript (выраженный в jQuery) для начала:
Код ожидает, что все содержимое вашей страницы будет находиться внутри элемента div внутри элемента body. В альбомном режиме он поворачивается на 90 градусов - обратно в портрет.
Оставьте читателю в качестве упражнения: div вращается вокруг своей центральной точки, поэтому его положение, вероятно, нужно будет отрегулировать, если оно не будет совершенно квадратным.
Кроме того, есть не привлекательная визуальная проблема. Когда вы меняете ориентацию, Safari вращается медленно, а затем div верхнего уровня привязывается к 90 градусам. Для еще большего удовольствия добавьте
на ваш CSS. Когда устройство вращается, то Safari делает, а содержание вашей страницы. Начинка!
источник
Этот ответ пока невозможен, но я публикую его для "будущих поколений". Надеемся, что когда-нибудь мы сможем сделать это с помощью правила CSS @viewport:
Вот страница «Могу ли я использовать» (по состоянию на 2019 год только IE и Edge):
https://caniuse.com/#feat=mdn-css_at-rules_viewport_orientation
Спецификация (в процессе):
https://drafts.csswg.org/css-device-adapt/#orientation-desc
MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation
Исходя из таблицы совместимости браузера MDN и следующей статьи, похоже, что есть некоторая поддержка в определенных версиях IE и Opera:
http://menacingcloud.com/?c=cssViewportOrMetaTag
Эта спецификация JS API также выглядит уместно:
https://w3c.github.io/screen-orientation/
Я предполагал, что, поскольку это было возможно с предложенным
@viewport
правилом, это было бы возможно путем установкиorientation
в настройках области просмотра вmeta
теге, но я до сих пор не добился успеха в этом.Не стесняйтесь обновлять этот ответ по мере улучшения ситуации.
источник
Следующий код был использован в нашей html5 игре.
источник
Я придумал этот метод CSS только для поворота экрана с помощью медиа-запросов. Запросы основаны на размерах экрана, которые я нашел здесь . 480px показалось хорошим, так как ни одно / несколько устройств не имели ширину более 480px или высоту менее 480px.
источник
orientation: landscape
не будет работать так хорошо в моем примере @JustinPutneyScreen.lockOrientation()
решает эту проблему, хотя поддержка не является универсальной в то время (апрель 2017 года):https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation
источник
Мне нравится идея сказать пользователю, чтобы он переключил свой телефон в портретный режим. Как упомянуто здесь: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... но с использованием CSS вместо JavaScript.
источник
Возможно, в новом будущем у него будет нестандартное решение ...
По состоянию на май 2015 года
есть экспериментальная функциональность, которая делает это.
Но это работает только на Firefox 18+, IE11 + и Chrome 38+.
Тем не менее, он еще не работает на Opera или Safari.
https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility
Вот текущий код для совместимых браузеров:
источник
Хотя вы не можете предотвратить вступление в силу изменения ориентации, вы не можете эмулировать изменения, как указано в других ответах.
Сначала определите ориентацию или переориентацию устройства и, используя JavaScript, добавьте имя класса в элемент обертывания (в этом примере я использую тег body).
Затем, если устройство имеет альбомную ориентацию, используйте CSS, чтобы установить ширину тела для высоты области просмотра и высоту тела для ширины области просмотра. И давайте установим источник преобразования, пока мы на нем.
Теперь переориентируйте элемент body и сдвиньте (переведите) его в нужное положение.
источник
Это или подобное CSS-решение, по крайней мере, сохранит ваш макет, если это то, что вам нужно.
Корневое решение учитывает возможности устройства, а не пытается их ограничить. Если устройство не допускает соответствующих ограничений, тогда лучшим выбором будет простой взлом, так как дизайн по сути неполный. Чем проще, тем лучше.
источник
В кофе, если это кому-нибудь нужно.
источник
Вдохновленный ответом @ Grumdrig, а также потому, что некоторые из использованных инструкций не будут работать, я предлагаю следующий сценарий, если это потребуется кому-то еще:
источник
У меня похожая проблема, но для создания ландшафта ... Я считаю, что код ниже должен помочь:
источник
Нажмите здесь для учебного и рабочего примера с моего сайта.
Вам больше не нужно использовать хаки только для того, чтобы посмотреть jQuery Mobile Screen Orientation, и вы больше не должны использовать PhoneGap, если вы на самом деле не используете PhoneGap.
Чтобы сделать эту работу в 2015 году нам нужно:
И один из этих плагинов в зависимости от вашей версии Cordova:
плагин Cordova добавить нет.yoik.cordova.plugins.screenorientation
Cordova плагин добавить Cordova-плагин-экран-ориентация
А для блокировки ориентации экрана просто используйте эту функцию:
Чтобы разблокировать это:
Возможные ориентации:
Portrait-primary Ориентация в основном режиме портрета.
портрет-вторичный Ориентация в режиме вторичного портрета.
альбомная ориентация Ориентация в основном ландшафтном режиме.
ландшафт-вторичный Ориентация в режиме вторичного ландшафта.
Книжная ориентация - портретно-первичная или портретно-вторичная (сенсор).
альбомная ориентация - ландшафтно-первичная или ландшафтно-вторичная (датчик).
источник