FFBlog スマホのHTML5新要素の対応状況を調査しました

山本

HTML5

こんにちは、x-fit開発スタッフの山本です。

今回は、スマートフォンの標準ブラウザがHTML5の新要素にどれくらい対応しているか、利用頻度が高そうなタグを抜粋して調べてみました。

調査対象

調査した新要素のタグは以下の9つ。
header, footer, nav, article, aside, section, hgroup, figure, figcaption

スマートフォンは、iPhone、Android、WindowsPhone、BlackBerryから9機種。

displayプロパティのブロック要素の適用状況を、実機を使って調査しました。
displayは、ブロック要素・インライン要素などの「表示形式」を指定するプロパティです。

displayプロパティ値をJavaScriptで取得して実端末のブラウザが何を適用しているか、「display:block」を出してブロックの表示になるか、デフォルトの「display:inline」となってインラインの表示になるかで判断しています。

それぞれの機種の標準ブラウザが、タグに対応していればブロックの表示になります。

対応機種の表示	非対応機種の表示

未対応の機種ではデフォルトの「display:inline」となり、テキストの一部のような扱いのため余白や枠線の指定が効いていません。

	iPhone4 [iOS_4.0]	iPhone4 [iOS_5.1]	Xperia [Android_1.6]	IS04 [Android_2.1]	X06HT [Android_2.2]
header	○	○	×	×	○
footer	○	○	×	×	○
nav	○	○	×	×	○
article	○	○	×	×	○
aside	○	○	×	×	○
section	○	○	×	×	○
hgroup	×	○	×	×	×
figure	×	○	×	×	×
figcaption	×	○	×	×	×

	Xperia arc [Android_2.3]	GALAXY NEXUS [Android_4.0]	IS12T [WindowsPhone_7.5]	BlackBerry Bold 9900 [BlackBerry_7.1]
header	○	○	○	○
footer	○	○	○	○
nav	○	○	○	○
article	○	○	○	○
aside	○	○	○	○
section	○	○	○	○
hgroup	×	○	○	○
figure	×	○	○	×
figcaption	×	○	○	×

Androidの古いバージョンはほとんど対応できていないようです。またiPhoneもOSバージョンによって対応している範囲が異なるようです。

複数の機種に対応するページでHTML5の新要素を記述したときは、スタイルシートにも「display:block」を指定することをオススメします。

タグ: