Как мне заблокировать ориентацию в портретном режиме в веб-приложении для iPhone?
https://stackoverflow.com/questions/1207008
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я создаю веб-приложение для iPhone и хочу заблокировать ориентацию в портретном режиме.возможно ли это?Существуют ли какие-либо расширения web-kit для этого?
Пожалуйста, обратите внимание, что это приложение, написанное на HTML и JavaScript для мобильного Safari, это не нативное приложение, написанное на Objective-C.
Решение
Вы можете указать стили CSS в зависимости от ориентации видового экрана:Настройте таргетинг на браузер с помощью body[orient="альбомная ориентация"] или body[orient="книжная ориентация"]
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. В альбомном режиме он поворачивается на 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 также выглядит актуальной:
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');
});
Я придумал этот единственный CSS-метод поворота экрана с помощью медиа-запросов. Запросы основаны на размерах экрана , которые я нашел здесь . 480px казалось хорошим, так как ни одно / несколько устройств не имели ширину более 480px или высоту менее 480px.
@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.
Вот текущий код для совместимых браузеров:
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, добавьте имя класса в элемент обтекания (в этом примере я использую тег 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, чтобы установить ширину тела в соответствии с высотой области просмотра и высоту тела в соответствии с шириной области просмотра. И давайте & # 8217; установим источник преобразования, пока мы & # 8217; обращаемся к нему.
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Теперь переориентируйте элемент body и сдвиньте (переведите) его в нужное положение.
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
Вдохновленный ответом @ Grumdrig, и поскольку некоторые из использованных инструкций не будут работать, я предлагаю следующий сценарий, если это потребуется кому-то еще:
$(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, и вам больше не следует использовать PhoneGap, если только вы на самом деле не используете PhoneGap.
Чтобы это сработало в 2015 году, нам нужно:
- Кордова (любая версия, хотя все, что выше 4.0, лучше)
- PhoneGap (вы даже можете использовать PhoneGap, плагины совместимы)
И один из этих плагинов в зависимости от вашей версии Cordova:
- net.yoik.cordova.плагины.ориентация на экран (Кордова < 4)
плагин cordova добавляет net.yoik.cordova.plugins.screenorientation
- плагин cordova добавить cordova-plugin-ориентацию экрана (Cordova>= 4)
плагин cordova добавить cordova-plugin-ориентацию экрана
А чтобы заблокировать ориентацию экрана, просто воспользуйтесь этой функцией:
screen.lockOrientation('landscape');
Чтобы разблокировать его:
screen.unlockOrientation();
Возможные ориентации:
портрет-первичный Ориентация осуществляется в основном портретном режиме.
портрет-вторичный Ориентация осуществляется во вторичном портретном режиме.
ландшафт-первичный Ориентация осуществляется в основном альбомном режиме.
ландшафт-вторичный Ориентация осуществляется во вторичном ландшафтном режиме.
портрет Ориентация может быть либо портретно-первичной, либо портретно-вторичной (сенсорная).
пейзаж Ориентация может быть либо ландшафтно-первичной, либо ландшафтно-вторичной (сенсорная).
