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）