質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.80%

モバイルブラウザでの高さの可変による挙動の不安定さを解消したい

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 10K+

score 24

前提・実現したいこと

モバイルブラウザに全画面でヘッダーを表示し、スクロールするとフッターにメニューが表示されて固定されるものを作ろうとしています。
PCでは問題なくできたのですが、Safari、Chromeなどのモバイルブラウザの場合、アドレスバーや下部のボタンなどがスクロール状況により表示されるため、メニューの挙動が安定しません。
解決方法を教えていただけるとありがたいです。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var height = $('footer').height();
$(window).on('scroll', function() {
if ($(this).scrollTop() > height) {
$('footer').addClass('fixed');
} else {
$('footer').removeClass('fixed');
}
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
header {
height:100vh;
background:#f00;
}
main {
padding-bottom:100px;
}
footer {
position: absolute;
height:100px;
bottom:-100px;
background:#999;
}
.fixed {
position: fixed;
bottom: 0;
}
</style>
</head>

<body>
<header>
全画面表示
</header>
<main>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
なんらかのコンテンツ<br>
</main>
<footer>
footer固定メニュー
</footer>
</body>
</html>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

問題の解決策ではないのでご回答になっていないと思いますが、

個人的には下部メニューなどはあまりオススメしない&ブラウザの機能自体をjsで制御するとなるとエグいことになるのでUIを設計し直したほうがいいと思います。
基本的にブラウザの挙動をjavascriptから操作することは難しい&JSでその辺をゴリゴリ実装すると端末依存の影響で他のデバイスで思わぬバグを産んでしまうのでこだわればこだわるほど泥沼にハマると思います。

また、仮にjsでゴリゴリやる場合は以下の記事などで行っていることをやる感じです。
iOS safariで画面下部のメニューバーが消えないようにする
これは何をしているかというと、上のurlツールバーと下のメニューを除いた部分いっぱいにdiv#wrapperを広げてその中をスクロールすると行った結構無理やり実装してる感じがあります。

ネイティブアプリとWEBアプリは同じスマホで見ているので似てるかもしれませんが、似て非なるものだと思っているのでブラウザが持っている基本的な機能を考慮してUI設計をされるといいかもしれません!

上から目線になってしまって申し訳ないです!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/15 23:16

    コメントありがとうございます。
    どうしても解決できない場合にはUIを変更する予定ですが、今後も似た要望が出てこないとも限らないので、もし解決できるようならそのやり方を知りたいと考えています。

    変動するブラウザの高さを取得するのはやはり難しいのですかね。。。

    キャンセル

  • 2016/12/16 00:24

    変動するブラウザの高さを取得するのは可能だと思います。
    試してないので予想になりますが、
    window.onresize(function(){
    console.log('resized!')
    })
    で取得できるかもしれません。
    これもいろんな端末で要検証ですが。。。

    もしonresizeのトリガーが引かれない場合は、

    // 初期値
    var innerHeight = window.innerHeight;

    setTimeout(function(){
    if(innerHeight = window.innerHeight){
    console.log('resized!')
    }
    }, 50)

    として50ms秒ごとに現在のinnerHeightを取ってあげることで可能かと思います。
    ただ、どちらも高頻度イベントなので実装する場合はWebフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ]([http://qiita.com/damele0n/items/f4050649de023a948178)などを見ながら実装されることをおすすめします!

    ただ、iphoneの下から出てくるメニューバーの上に配置することは不可能だと思います。
    あのメニューバー自体はwindowオブジェクトの中にないのでそれを越える場所に配置することは出来ません。

    回答になっていなかったらすいません。。。_(:3 」∠ )_

    キャンセル

0

iOSでは、どのバージョンからか忘れましたが上部下部のアドレスバーやブラウザフッターメニューの表示非表示制御はできなくなりました。
iOSのホーム画面上にアイコンとして登録したサイトでは出来たような気がします。
たしかこんなタグを使います。
<meta name="apple-mobile-web-app-capable" content="yes" />

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る