jQuery - $(window).innerHeight();でウィンドウの高さを超えた値が戻る

小さなことでもいいから1記事/dayは何か書くぞお

今日のテーマ,やりたかったこと

jQuery, javascriptでウィンドウの高さを取得したい
(モーダル画像を画面中央に表示したい)

こまったこと

$(window).innerHeight();

とかだと想定通りの値が帰ってこない。
ウィンドウの高さを大きく超えた値が帰ってくる。

解決法

1,

window.innerHeight;

生js使うと想定通りの値を取ってこれた。

2,

<!DOCTYPE html>

DOCTYPE宣言忘れてた。付けたら想定通りの値を取ってこれた(びっくり)

詳細、経緯

ぼくのポートフォリオサイト作成にあたり、
画像クリックを起点としたモーダルを自前で実装してみた。
参考にした→https://syncer.jp/jquery-modal-window

その際、表示されるモーダルの座標をjsで取得したかったからこんな風にかいた。

function centeringModalImg() {
    // ウィンドウの高さ,幅を取得
    let window_w = $(window).innerWidth();
    let window_h = $(window).innerHeight();

    // モーダル画像の高さ,幅を取得
    let app_w = $(".modal-app-img").width();
    let app_h = $(".modal-app-img").height();

    // 足して2で割る
    let pxleft = ((window_w - app_w) / 2);
    let pxtop = ((window_h - app_h) / 2);

    // 予めposition: fixed;を指定してある要素にleft,topを追加。
    //  画面中央に画像が表示されるように。
    $(".js-modal-app").css({"left": pxleft + "px"});
    $(".js-modal-app").css({"top": pxtop + "px"});
  }

やったー!jQuery便利だなー!画像ぽちっ。 f:id:tanukikawaii:20170505014202p:plain

はい。
なにかがおかしい。console.log。
f:id:tanukikawaii:20170505014353p:plain
(1行目が$(window).innerHeight(); の値)

解決策1

おかしい。生jsで書いてみた。

function centeringModalImg() {
    // ウィンドウの高さ,幅を取得
    let window_w = window.innerWidth;
    let window_h = window.innerHeight;
(以下略)

f:id:tanukikawaii:20170505015823p:plain f:id:tanukikawaii:20170505015842p:plain

わあい. 高さの値も上手く取ってこれた。

解決策2

<!DOCTYPE html>

をHTML側に宣言するの忘れてました…
参考→http://unguis.cre8or.jp/web/253
付けたら

$(window).innerHeight();

でも想定通りの値が戻ってきたよ(๑•̀ㅂ•́)و✧

DOCTYPE宣言、特に意識せずとも書いてて必要性に疑問を持ってたんだけど
まさかjQueryの挙動に影響を及ぼすなんて…。
重要性を痛みでもって実感したよ。

また今回、副次的にhtmlのviewportの概念を初めて知った。
これについてはcordgridに分かりやすく書いてあるから寝る前に読もう。

それと、こっちの解決策はこの記事書きながら調べてたらたどり着いたのだ。
早速ブログ書いてよかったー><!!