Скрытие URL AddressBar на Android в ландшафтном режиме

Question

Используя JavaScript, как прокрутить панель URL в ландшафтном режиме. В портретном режиме вы просто делаете window.scrollTo (0,1), и это работает, но не в ландшафтном режиме. Это идет частично в адресной строке.

Есть предложения, что попробовать?

Answer 1

Есть два способа сделать это.В зависимости от того, какую страницу вы отображаете.

Следует помнить одну вещь: в мобильном браузере должен быть контент для прокрутки.И под контентом для прокрутки я подразумеваю, что содержание на странице должно быть выше, чем высота окна.Если нет, то он вообще не будет прокручиваться вниз. Option1 Пойдите на это, если вы знаете, что содержание вашей страницы превышает высоту окна.

    (function removeAddressBar(){
         // Make sure it really scrolls down.
         window.scrollTo(0, 10);

         // Set a timeout to check that it has scrolled down.
         setTimeout(function() { 
              if(window.scrollY == 0) { 
                   removeAddressBar();
              }else{
                   window.scrollTo(0, 1);
                   //launch();
              }
         }, 500);
    })(this)

Опция2 Сделайте это, если вы не знаете, превышает ли ваш контент высоту окна. <div id='scroller' style='position:absolute;height:2000px;'></div>

    (function removeAddressBar(){
         window.scrollTo(0, 10);
         setTimeout(function() { 
              if(window.scrollY == 0) {
                   removeAddressBar();
              }else{
                   window.scrollTo(0, 1);
                   document.getElementById('scroller').style.height = window.innerHeight+'px';
                   //launch();
              }
         }, 500);
    })(this)

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

Answer 2

Вот что у меня сработало:

window.screen.orientation.onchange = function() {
      if (this.type.startsWith('landscape')) {
        document.querySelector('#container').webkitRequestFullscreen();
      } else {
        document.webkitExitFullscreen();
      }
};

Нашел этот фрагмент кода здесь: https://mounirlamouri.github.io/sandbox/fullscreen-orientation.html Это работает по крайней мере для браузеров Android Chrome.

Похоже, что этот скрипт выдаст ошибку на IOS-устройствах, поскольку они не поддерживают полноэкранный API. Поэтому функция должна быть заключена в оператор if для проверки, является ли это устройством IOS:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;