Manul Tech

iOSでは$(window).height() と window.innerHeight の値は違うらしい

スクロール位置によって発火する系のアクションを仕込んだページで、どうもiPadだけ位置がズレる。スマホは専用のアクションにしてあるから問題ないんだけども、iPadはいわゆるPCサイズと同じレイアウト/アクションにしてある。

なんか数値が合わないんですけど

本来であれば、ページの一番下まで行くと

$(document).height() === $(window).height() + $(window).scrollTop()

これが成り立つはずなんだけど、合わない。。なんで。
PCだとバッチリ合うのに、当たり前だけど。
最初はあんまり理解できていないviewportの問題かなーなんて思ってたけど違った。

WEMO
スクリーン・ウインドウ・画面サイズをjavascriptで取得する方法まとめ

こちらのサイトではwindow.innerWidth / window.innerHeightは "iOSは3つともURLバーの表示によって数値が増減する" とあったが、自分の環境(iOS 11.4.1)では同じではなかった。
「3つとも」というのはwindow.innerWidth / window.innerHeightに加え、$(window).width() / $(window).height()document.documentElement.clientWidth / document.documentElement.clientHeightのこと。

結局、window.innerHeightがURLバーの最大/最小化で変化するようだったので、

window.innerHeight === $(window).height() + $(window).scrollTop()

これが成立することとなり、解決。
ちなみにアンドロイドOSについては知らん。

いつまでもjQueryなんぞ使ってんじゃねーよ!ってことですかね。

コメント0