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の場合は常に縦向き時の値が返ってくるようでした。
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

コメントが承認されるまで時間がかかります。

2021年4月
 123
45678910
11121314151617
18192021222324
252627282930