スマホでアドレスバーが出てきてレイアウトがずれる

Question

###前提・実現したいこと
fullpage.jsを使ってサイトをフルスクリーン表示にしたいのですが、
スマホだとアドレスバーが出てしまい表示が崩れてしまいます。
しかもスクロールすると次の内容に移ってしまう為、
見ているユーザー自身でも消すことが全くできないです。
アドレスバーをjQuery等で非表示にすることは
出来ないのでしょうか？
詳しい方教えていただけると助かります。

###補足情報
mobile-web-app-capableを使用して
一度ホームアプリに登録する方法以外でお願い致します。

window.onload = function(){
setTimeout("scrollTo(0,1)", 100);
}
というコードを試してみましたが、
何も変化はありませんでした。

Answer 1

fullpage.jsの代わりにページ全体をdivで囲んで、下記コードを動作させてみてはいかがですか？

div = document.querySelector("divのID")
div.style.width = window.screen.width
div.style.height = window.screen.height

追記
申し訳ありません。
ベストアンサーにしていただき改めてこの投稿を閲覧したところ自分でもなぜ張ったのか分からないようなコード貼っていました。
正しくはこのようなコードでした。

if(element.requestFullscreen) {
element.requestFullscreen();
}
else if(element.webkitRequestFullScreen){
element.webkitRequestFullScreen();
}
else if(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}
else if(element.msRequestFullscreen){
element.msRequestFullscreen();
}

Comments

[kihara]

アドレスバーを消したいのですが、それで消えるのでしょうか？

[Diawel]

div内のコンテンツがフルスクリーン表示されるのでアドレスバーは見えません。