Как отключить переключение пейзажа / портрета в мобильном веб-приложении (браузер Android / iOS-Mobile Safari) - PullRequest
Новая
       1

Как отключить переключение пейзажа / портрета в мобильном веб-приложении (браузер Android / iOS-Mobile Safari)

9 голосов
/ 16 ноября 2011

Я пытаюсь отключить поворот телефона, влияющий на веб-страницу одного из моих мобильных приложений на HTML5.Никакой реорганизации макета, изменения размера, поведения ориентации.

Я хочу, чтобы телефон поворачивался, а загруженный исходный макет не изменился, что вынуждает пользователя использовать приложение в исходной ориентации.Есть много тонкостей в пользовательской логике, и я действительно чувствую, что это необходимо в моем приложении, поэтому, пожалуйста, не комментируйте этот выбор, скорее помогите с ответом на мой вопрос в первом предложении.

  1. Я пыталсяпрослушивание ОБА событий «directionalchange» и «resize», а также вызовы на них объектов warnDefault и stopPropagation, чтобы предотвратить любое поведение браузера при реорганизации страницы в соответствии с альбомной ориентацией при повороте.Ну явно мешает НИЧЕГО (в идеале).

    window.addEventListener("orientationchange", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);

window.addEventListener("resize", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);

Совершенно без разницы.Браузер по-прежнему реорганизовал страницу на Android (как до2.1, так и после) и iPhone 4-5.

  1. пробовал метатеги 

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no />

    , затем разозлился, попробовал

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />

    тоже ничего не изменило.

  2. яростно посмотрел на StackOverflow, увидел, что я делал на шаге 1. выложил туда несколько раз ... попробовал еще разубедитесь, что я ничего не испортил.Не сработало.

  3. засосало мою гордость, затем решил продолжать врезаться в кирпичную стену из-за гордости, затем действительно засосало мою гордость и разместило здесь.

HALP.

Ответы [ 5 ]

6 голосов
/ 07 мая 2014

Очевидное решение - использовать для этого javaScript: 

if(window.innerHeight > window.innerWidth){
    document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)";
}

Когда экран вращается, поверните его назад.

6 голосов
/ 11 сентября 2013

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

<head>
<style type="text/css">
#landscape{
         position: absolute;
         top: 0px;
         left: 0px;
         background: #000000;
         width: 100%;
         height: 100%;
         display: none; 
         z-index: 20000;
         opacity: 0.9;
         margin:0 auto;
}
#landscape div{

        color: #FFFFFF;                                  
        opacity: 1;
        top: 50%;
        position: absolute;
        text-align: center;
        display: inline-block;
        width: 100%;
}
</style>
<script>          
      function doOnOrientationChange()
      {
        switch(window.orientation) 
        {  
          case -90:                 
                 document.getElementById("landscape").style.display="block";
                 break;
          case 90:              
                document.getElementById("landscape").style.display="block";                 
                break;
         default:                   
                document.getElementById("landscape").style.display="none";
                break;                            
        }
      }

      //Listen to orientation change
      window.addEventListener('orientationchange', doOnOrientationChange);  

    </script>
</head>
<body onload="doOnOrientationChange();">
<div id="landscape"><div>"Rotate Device to Portrait"</div></div>
</body>
2 голосов
/ 28 мая 2012

Вы не можете отключить мобильную ориентацию в веб-приложении.Что вы можете сделать, так это повернуть страницу в портретную (используя вращение css из JS), когда они меняют ориентацию на горизонтальную модель.Таким образом, они будут вынуждены использовать ваше веб-приложение в портретном режиме.

Вы также можете показать им сообщение («только портретный режим», когда они пытаются просмотреть в горизонтальном режиме)

1 голос
/ 11 мая 2015

Держите это коротким и простым!:] 

window.addEventListener('orientationchange', function ()
{
    if (window.innerHeight > window.innerWidth)
    {
        document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)";
    }
});
0 голосов
/ 16 ноября 2011

добавление android:configChanges="keyboardHidden|orientation" в ваш AndroidManifest.xml.Это говорит системе, с какими изменениями конфигурации вы собираетесь справиться самостоятельно - в этом случае ничего не делая.

<activity android:name = "MyActivity" android:configChanges="keyboardHidden|orientation">

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...