Q&A
コメントありがとうございます。
どうしても解決できない場合にはUIを変更する予定ですが、今後も似た要望が出てこないとも限らないので、もし解決できるようならそのやり方を知りたいと考えています。
変動するブラウザの高さを取得するのはやはり難しいのですかね。。。
###前提・実現したいこと
モバイルブラウザに全画面でヘッダーを表示し、スクロールするとフッターにメニューが表示されて固定されるものを作ろうとしています。
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>
回答2件
0
iOSでは、どのバージョンからか忘れましたが上部下部のアドレスバーやブラウザフッターメニューの表示非表示制御はできなくなりました。
iOSのホーム画面上にアイコンとして登録したサイトでは出来たような気がします。
たしかこんなタグを使います。
<meta name="apple-mobile-web-app-capable" content="yes" />
投稿2017/02/16 16:32
総合スコア607
0
問題の解決策ではないのでご回答になっていないと思いますが、
個人的には下部メニューなどはあまりオススメしない＆ブラウザの機能自体をjsで制御するとなるとエグいことになるのでUIを設計し直したほうがいいと思います。
基本的にブラウザの挙動をjavascriptから操作することは難しい＆JSでその辺をゴリゴリ実装すると端末依存の影響で他のデバイスで思わぬバグを産んでしまうのでこだわればこだわるほど泥沼にハマると思います。
また、仮にjsでゴリゴリやる場合は以下の記事などで行っていることをやる感じです。
iOS safariで画面下部のメニューバーが消えないようにする
これは何をしているかというと、上のurlツールバーと下のメニューを除いた部分いっぱいにdiv#wrapperを広げてその中をスクロールすると行った結構無理やり実装してる感じがあります。
ネイティブアプリとWEBアプリは同じスマホで見ているので似てるかもしれませんが、似て非なるものだと思っているのでブラウザが持っている基本的な機能を考慮してUI設計をされるといいかもしれません！
上から目線になってしまって申し訳ないです！
投稿2016/12/14 11:08
総合スコア1869
変動するブラウザの高さを取得するのは可能だと思います。
試してないので予想になりますが、
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 」∠ )_
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。