Androidで横向きモードのURLアドレスバーを非表示にする

Question

JavaScriptを使用すると、横向きモードでURLバーをスクロールする方法を教えてください。ポートレートモードでは、window.scrollTo（0,1）を実行するだけで、それは機能しますが、Landscapeモードでは機能しません。 URLバーの途中にあります。

何を試してみるべきですか？

Answer 1

これには2通りの方法があります。表示しているページの種類によって異なります。

モバイルブラウザにはスクロールするためのコンテンツが必要であることに注意してください。また、スクロールするコンテンツによって、ページのコンテンツがウィンドウの高さより高くなる必要があることを意味します。そうでなければ、まったくスクロールしません。

オプション1
このために行く、あなたのページのコンテンツは、ウィンドウの高さ、より多くであることがわかっている場合。

 

    (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

これが私の仕事です： https://mounirlamouri.github.io/sandbox/fullscreen-orientation.html これは、Androidクロームブラウザのために、少なくとも作品：

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

は、ここではコードスニペットことがわかりました。

このスクリプトは、Fullscreen APIをサポートしていないため、IOSデバイスでエラーが発生するようです。 IOSデバイスかどうかを確認するために関数をif文でラップする必要があります。

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