iOS Safariのwindow.innerHeight / $(window).height();

スマホサイト（iPhone）での高さ取得問題

$(window).height();

でうまくいかず、そえばあったなと思って

window.innerHeight

を使うとわりとうまくいく。

ちょっと深追いしてみると、

• iOS7にて、Mobile Safariのwindow.innerHeightを正しく取得する方法
• iphoneのinnerHeightがおかしい場合 | lab ve-lo

みたいにiOS7でinnerHeightがおかしいようというのがあったのですが、じぶんのiOS7.1環境でこんなん作ってみたけど、うまく取得してくれた。7.1~直ったのかしら

簡単にいうと

setInterval(function(){
	$('#innerHeight').text('window.innerHeight : '+window.innerHeight+'px')
	$('#windowHeight').text('$(window).height() : '+$(window).height()+'px')
},1000);

いうのをいれています。

キャプチャとってサイズ測ってみました。

1点おかしいのが、上下バーのグレーの境界線。

おかしい①
Retinaでキャプチャとっても1pxにしかならない

おかしい②
バーが表示されてないときも上下に1pxずつ入る

たぶんこれのせいでポートレート+下のバーなしはinnnerHeightがおかしい
（上のバーは境界線含めて80px）