ファーストビューの画像を画面の高さに指定しているのですがスマホだとスクロール時にずれてしまう

Question

ファーストビューのメインビジュアルの高さを画面の高さにしたいのですが、
スマホだとスクロール時にメインビジュアルの画像が上下に大きくなります。

原因は、読み込み時はアドレスバーや下部のメニューの高さを除いた画面の高さが取得されるのに、スクロール時にアドレスバーや下部のメニューが隠れ、再び画面の高さが取得されてリサイズされることだと思うのですが、どうやってリサイズしないようにすればいいのかわかりません。

以下のように、画面の高さを取得してメインビジュアルの高さに指定しています。

$(function(){
  hsize = $(window).height();
  $('.main-visual').height(hsize);  
});

どうぞよろしくお願いいたします。

Answer 1

jQueryには、innerHeightメソッドというものがあります。
これは、コンテンツ領域を数値で返すものなので、windowと一緒に使えばご期待の結果が得られるかと思います。

スクロールしてアドレスバーが隠れた時は、resizeメソッドなどを使って対応してみてください。

例を挙げておきます。

$(function(){
  inhsize = $(window).innerHeight();
  $('.main-visual').height(inhsize);  
});

Comments

[KUBO3]

回答いただきありがとうございます。
参考にさせていただき、試してみます！