Я создаю веб-приложение iPhone и хочу заблокировать ориентацию в портретном режиме. Это возможно? Существуют ли какие-либо расширения для веб-набора?
Обратите внимание, что это приложение, написанное в HTML и JavaScript для Mobile Safari, оно НЕ является родным приложением, написанным в Objective-C.
Вы можете указать стили CSS, основанные на ориентации в окне просмотра: Направьте браузер на тело [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), чтобы вы начали:
$(document).ready(function () {
function reorient(e) {
var portrait = (window.orientation % 180 == 0);
$("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
}
window.onorientationchange = reorient;
window.setTimeout(reorient, 0);
});
Код ожидает, что все содержимое вашей страницы будет находиться внутри div только внутри элемента body. Он вращает этот div на 90 градусов в ландшафтном режиме - назад к портрету.
Слева в качестве упражнения для читателя: div вращается вокруг своей центральной точки, поэтому его положение, вероятно, необходимо будет отрегулировать, если оно не будет идеально квадратным.
Кроме того, есть непривлекательная визуальная проблема. Когда вы меняете ориентацию, Safari вращается медленно, а верхний уровень div привязывается к 90 градусам по-разному. Для еще большего удовольствия добавьте
body > div { -webkit-transition: all 1s ease-in-out; }
для вашего CSS. Когда устройство вращается, то Safari делает, а затем содержимое вашей страницы. Начинка!
Этот ответ пока невозможен, но я отправляю его для "будущих поколений". Надеюсь, когда-нибудь мы сможем это сделать с помощью правила CSS @viewport:
@viewport {
orientation: portrait;
}
Спектр (в процессе):
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 Spec также выглядит актуальным:
https://w3c.github.io/screen-orientation/
Я предположил, что, поскольку это возможно с помощью предлагаемого правила @viewport, было бы возможно, установив orientation в настройках просмотра в теге meta, но до сих пор я не имел успеха с этим.
Не стесняйтесь обновлять этот ответ по мере улучшения ситуации.
В нашей игре html5 был использован следующий код.
$(document).ready(function () {
$(window)
.bind('orientationchange', function(){
if (window.orientation % 180 == 0){
$(document.body).css("-webkit-transform-origin", "")
.css("-webkit-transform", "");
}
else {
if ( window.orientation > 0) { //clockwise
$(document.body).css("-webkit-transform-origin", "200px 190px")
.css("-webkit-transform", "rotate(-90deg)");
}
else {
$(document.body).css("-webkit-transform-origin", "280px 190px")
.css("-webkit-transform", "rotate(90deg)");
}
}
})
.trigger('orientationchange');
});
Screen.lockOrientation() решает эту проблему, хотя поддержка в то время была меньше универсальной (апрель 2017 года):
http://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation
Я придумал этот метод CSS только для поворота экрана с помощью медиа-запросов. Запросы основаны на размерах экрана которые я нашел здесь. 480px показалось хорошим, поскольку никакие/несколько устройств имели ширину более 480 пикселей или менее 480 пикселей.
@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
html{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
width: 320px; /*this is the iPhone screen width.*/
position: absolute;
top: 100%;
left: 0
}
}
Мне нравится идея заставить пользователя вернуть свой телефон в портретный режим. Как он упоминается здесь: 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
Вот текущий код совместимых браузеров:
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px
html {
width: 320px;
overflow-x: hidden;
}
Это или аналогичное решение CSS, по крайней мере, сохранит ваш макет, если это то, что вам нужно.
Корневое решение учитывает возможности устройств, а не пытается их ограничить. Если устройство не позволяет вам получить соответствующее ограничение, чем простой взлом, это лучший выбор, поскольку дизайн по существу неполный. Чем проще, тем лучше.
В кофе, если кому-то это нужно.
$(window).bind 'orientationchange', ->
if window.orientation % 180 == 0
$(document.body).css
"-webkit-transform-origin" : ''
"-webkit-transform" : ''
else
if window.orientation > 0
$(document.body).css
"-webkit-transform-origin" : "200px 190px"
"-webkit-transform" : "rotate(-90deg)"
else
$(document.body).css
"-webkit-transform-origin" : "280px 190px"
"-webkit-transform" : "rotate(90deg)"
Пока вы не можете предотвратить изменение ориентации, вы не можете эмулировать никаких изменений, как указано в других ответах.
Сначала определите ориентацию устройства или переориентацию и, используя JavaScript, добавьте имя класса в свой элемент wrapper (в этом примере я использую тег body).
function deviceOrientation() {
var body = document.body;
switch(window.orientation) {
case 90:
body.classList = '';
body.classList.add('rotation90');
break;
case -90:
body.classList = '';
body.classList.add('rotation-90');
break;
default:
body.classList = '';
body.classList.add('portrait');
break;
}
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();
Затем, если устройство является ландшафтным, используйте CSS, чтобы установить ширину тела на высоту видового экрана и высоту тела до ширины окна просмотра. И позволяет установить источник преобразования, находясь на нем.
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Теперь переориентируйте элемент тела и сдвиньте (переведите) его в нужное положение.
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
Вдохновленный от ответа @Grumdrig, и поскольку некоторые из используемых инструкций не будут работать, я предлагаю следующее script, если это необходимо кому-то еще:
$(document).ready(function () {
function reorient(e) {
var orientation = window.screen.orientation.type;
$("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
}
$(window).on("orientationchange",function(){
reorient();
});
window.setTimeout(reorient, 0);
});
Нажмите здесь для учебника и рабочего примера с моего сайта.
Вам больше не нужно использовать хаки, чтобы посмотреть jQuery Mobile Screen Orientation, и вам больше не нужно использовать PhoneGap, если вы на самом деле не используете PhoneGap.
Чтобы выполнить эту работу в 2015 году, нам необходимо:
И один из этих плагинов в зависимости от вашей версии Кордовы:
плагин cordova добавить net.yoik.cordova.plugins.screenorientation
плагин cordova добавить ориентацию плагинов-плагинов
И для блокировки ориентации экрана просто используйте эту функцию:
screen.lockOrientation('landscape');
Чтобы разблокировать его:
screen.unlockOrientation();
Возможные ориентации:
портретно-первичный Ориентация находится в режиме основного портрета.
портрет-вторичная Ориентация находится в режиме вторичной портретной ориентации.
пейзаж-первичный Ориентация находится в основном ландшафтном режиме.
пейзаж-вторичный Ориентация находится в режиме вторичного ландшафта.
портрет Ориентация - портретная или портретная (сенсорная).
пейзаж Ориентация является либо ландшафтно-первичной, либо альбомной-вторичной (датчик).