コンテンツをウィンドウの高さに可変させるコードのサンプルです。
トップページのメインエリアをフルスクリーンにしたい場合などに使える方法だと思います。
html
<section id="main-area">
コンテンツ
</section>
js
//エリアの指定
var mainArea = $('#main-area');
//ウィンドウの高さを取得
var winHeight = window.innerHeight ? window.innerHeight: $(window).height();
//高さ指定
mainArea.css({'height':winHeight});
//ウィンドウサイズ監視
$(window).on('resize', function(){
winHeight = window.innerHeight ? window.innerHeight: $(window).height();
mainArea.css({'height':winHeight});
});
SPの時は設定を解除させたい場合
ブレークポイントを設定してスマホサイズの時に、高さのスタイルを削除するように設定を追加します。
//エリアの指定
var mainArea = $('#main-area');
//ブレークポイント
var spWidth = 640;
//ウィンドウの高さを取得
var winHeight = window.innerHeight ? window.innerHeight: $(window).height();
//ウィンドウの幅を取得
var winWidth = window.innerWidth ? window.innerWidth: $(window).width();
//初回PCサイズだった場合に高さ指定
if(winWidth > spWidth) {
mainArea.css({'height':winHeight});
}
//ウィンドウサイズ監視
$(window).on('resize', function(){
winWidth = window.innerWidth ? window.innerWidth: $(window).width();
winHeight = window.innerHeight ? window.innerHeight: $(window).height();
//ブレークポイントよりウィンドウサイズが大きい場合
if(winWidth > spWidth) {
mainArea.css({'height':winHeight});
} else { //スマホ表示の時にスタイルを削除する
if(mainArea.attr('style')) {
mainArea.removeAttr('style');
}
}
});
初期表示が上手くいかない場合は、onメソッドにloadを追加してあげれば大丈夫だと思います。
$(window).on('load resize', function(){...
参考リンク
- jQuery:css()メソッドで指定した要素にCSSを追加する
- jQuery window の幅と高さを正確に出す方法
- 要素の属性を操作するには?(attr/removeAttr)
- [jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する
- JQueryで読み込み時とリサイズ時にブラウザサイズに横幅を合わせる