【初心者向け】スマホのフッターがアドレスバーで隠れる問題を解決する

/ 最終更新日：2021.09.03
書いた人： 

こんにちは、YAです。

今日は、WebサイトやLPのレスポンシブ対応の際、モバイルブラウザで直面する、”例のあの問題”について調査いたしましたので、こちらにまとめます。

さて、”例のあの問題”とは・・・”フッター迷子事件”です！！！！！！

　

”フッター迷子事件”
せっかく作ったWebサイトのフッターやLPの最下部が、モバイルブラウザ上でツールバーやアドレスバーに被って隠されてしまう事件。

　

今回の記事では、jQueryを利用し、Webサイト末端までがきちんと隠されず表示されるようにする方法を勉強しましたので、忘れないうちに記載します。

結論から言いますと、まず、下記のソースコードをコピペしましょう。そして、ちょっとずつ解析していきたいと思います。

  // 1. アドレスバーを除いた画面を表示
  jQuery(function(){
  var windowHeight = jQuery(window).height();
  jQuery('.wrap').height(windowHeight);
  });

  // 2. ページサイズを変更した時の処理
  jQuery(window).resize(function(){
  var windowHeight = jQuery(window).height();
  jQuery('.wrap').height(windowHeight);
  });

// 1. アドレスバーを除いた画面を表示

jQuery(function(){

→ HTMLを読み終えたら、{}内の処理が実行されます。

var windowHeight = jQuery(window).height();

→ “jQuery(window).height()” で、windowのアドレスバー・ツールバーを除いた高さが取得できます。任意の変数（ここでは、windowHeight）に代入。

jQuery('.wrap').height(windowHeight);

→ アドレスバーを除いた高さを表示対象の要素（ここでは’.wrap’）に付与します。

　

// 2. ページサイズを変更した時の処理

jQuery(window).resize(function(){

→ “jQuery(window).resize()”にてwindowのサイズ変更を検知したら、”function(){}”で{}内の処理を実行します。

これにより、windowのサイズを変更する都度、ツールバー・アドレスバーを除いた高さが計算され、その高さを適用した領域の表示が可能になります。

　　　　　　　

以上、”フッター迷子事件”の解決法でした。