iOSとAndroidでavailWidthとavailHeightの挙動が異なる

availWidthとavailHeightをスマートフォンサイトで使用した時に、iOSとAndroidで挙動が違っているようだったのでメモしておきます。

サンプルコード

ページアクセス時とリサイズ時にavailWidthとavailHeightを取得して、値を表示させてみます。

HTML

<div>width: <span id="w"></span></div>
<div>height: <span id="h"></span></div>

JavaScript

$(function() {
	// availWidthとavailHeightの値チェック
	$('#w').text(screen.availWidth);
	$('#h').text(screen.availHeight);

	$(window).on('resize', function() {
		// availWidthとavailHeightの値チェック
		$('#w').text(screen.availWidth);
		$('#h').text(screen.availHeight);
	});
});

availWidthとavailHeightのデモページ
Androidの場合は端末の向きを変更すると値も合わせて変更されましたが、iOSの場合は常に縦向き時の値が返ってくるようでした。