visualViewport.height キーボードの高さを引いたwindowの高さを取得したい

Question

実現したいこと

キーボードの高さを引いたwindowの高さを取得したいです。visualViewport.heightを使えば取得できるようなので下記のコードを書いたのですが、キーボードの高さを引いていない全体のwindowの高さしか取得できず、助言を頂きたいです。

該当のソースコード

.oneにキーボードの高さを引いていないwindowの高さを表示、
入力欄(input)を押してキーボードが表示されると.twoにキーボードの高さを引いたwindowの高さを表示させたいです。

  <input type="text">
  <span class="one"></span>
  <span class="two"></span>

    var window_height = $(window).height();
    var keyboard_height = visualViewport.height;
    $('.one').text(window_height);
    $('.two').text(keyboard_height);

動作確認端末

iphone11
iOS 16.3.1
safari バージョン16.3.1
chrome バージョン112.0.5615.167

参考リンク

Comments

[int32_t]

質問文の JavaScript コードをどういうタイミングで実行しましたか?
また、動作を確認した OS とブラウザのバージョンなども書いたほうがいいかもしれません。

[yukarichang]

コメントありがとうございます。特にタイミングは指定しておらず、htmlファイルのbody閉じタグの直前に書いています。

Answer 1

質問文の JavaScript コードをどういうタイミングで実行しましたか?
body閉じタグの直前に書いています。

それではキーボードが出現したときに情報が更新されないですね。

resize イベントがあるらしいので、以下のような感じでどうでしょうか。

const vp = window.visualViewport;
function showSize() {
  $('.one').text($(window).height());
  $('.two').text(vp.height);  
}
vp.addEventListener('resize', showSize);
showSize();

Comments

[yukarichang]

ありがとうございます。頂いたコードで無事に取得できたので、なぜ動くのかをよく勉強したいと思います。