Как заблокировать ориентацию в портретном режиме в веб-приложении iPhone? - PullRequest
Новая
       34

Как заблокировать ориентацию в портретном режиме в веб-приложении iPhone?

152 голосов
/ 30 июля 2009

Я создаю веб-приложение для iPhone и хочу заблокировать ориентацию в портретном режиме. Это возможно? Существуют ли расширения веб-набора для этого?

Обратите внимание, что это приложение, написанное на HTML и JavaScript для Mobile Safari, это НЕ нативное приложение, написанное на Objective-C.

Ответы [ 13 ]

0 голосов
/ 04 сентября 2015

Нажмите здесь для учебного и рабочего примера с моего сайта.

Вам больше не нужно использовать хаки только для того, чтобы посмотреть jQuery Mobile Screen Orientation, и вы больше не должны использовать PhoneGap, если вы на самом деле не используете PhoneGap.

Чтобы сделать эту работу в 2015 году нам нужно:

  • Cordova (любая версия, хотя выше 4.0 лучше)
  • PhoneGap (вы даже можете использовать PhoneGap, плагины совместимы)

И один из этих плагинов в зависимости от вашей версии Cordova:

  • net.yoik.cordova.plugins.screenorientation (Cordova <4) </li>

плагин cordova add net.yoik.cordova.plugins.screenorientation

  • плагин Cordova добавить Cordova-плагин-экран-ориентация (Cordova> = 4)

плагин Cordova добавить Cordova-плагин-экран-ориентация

А для блокировки ориентации экрана просто используйте эту функцию: 

screen.lockOrientation('landscape');

Чтобы разблокировать его: 

screen.unlockOrientation();

Возможные ориентации:

  • портретно-основной Ориентация в основном режиме портрета.

  • второстепенный портрет Ориентация в режиме вторичного портрета.

  • альбомная ориентация Ориентация в основном режиме альбомной ориентации.

  • альбомный-вторичный Ориентация в дополнительном ландшафтном режиме.

  • портрет Ориентация либо портретно-основная, либо портретно-вторичная (датчик).

  • альбомная Ориентация либо ландшафтно-основная, либо ландшафтно-вторичная (датчик).

0 голосов
/ 28 марта 2014

В кофе, если это кому-нибудь нужно. 

    $(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)"
0 голосов
/ 10 декабря 2013 
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

Это или аналогичное CSS-решение, по крайней мере, сохранит ваш макет, если вы этого хотите.

Корневое решение учитывает возможности устройства, а не пытается их ограничить. Если устройство не дает вам соответствующего ограничения, тогда лучшим выбором будет простой взлом, так как дизайн по сути неполный. Чем проще, тем лучше.

Страница:
...