今回は、携帯電話（除くPocket PC端末）にネイティブアプリケーションとして搭載されているフルブラウザについての話題を取り上げます。
ネイティブアプリケーションとして搭載されている2大フルブラウザはOperaとNetFrontです。
適用されるメディアタイプ
縦向きで閲覧時に、端末の横幅あわせて表示する閲覧モードで適用可能なメディアタイプを示します。Operaであればスモールスクリーンモード（SSR適用状態）、NetFrontであればSmart-Fitに相当するモードと考えてください。
| メディアタイプ | Opera | NetFront |
|---|---|---|
| screen | 機器によって異なる | 適用 |
| handheld | 適用 | 一部機器のみ適用 |
NetFrontはメディアタイプhandheldは適用されません。screenが適用されます。バージョンが3.4の機種についてはメディアタイプhandheldが適用されます。3.3以前のバージョンについては適用されずに、screenが適用されます。
Operaはメディアタイプhandheldが適用されます。メディアタイプscreenについては、WILLCOMの京セラ端末が非適用です。auのPCサイトビューアーはcolorプロパティとbackground-colorプロパティのみ適用です。
NetFrontによるレイアウト崩れ
例として、はてなダイアリーが提供しているスタイルシート（Hatena-purple）を適用している私のはてなダイアリーをNetFront Mobile Content Viewer（記事記述時点ではバージョン3.2相当）のSmart-Fitモードで閲覧した場合のスクリーンショットです。
本文部分は半分程度の幅しかありません。ナビゲーション部分の空白が左側にある状態になります。
現在の携帯電話の主流は横幅240px（QVGA）です。それに対してメディアタイプscreenのCSSが適用された状態かつページ横幅が端末の横幅になるのです。margin、padding、floatは解釈しますので場合によっては、目も当てられないことに……。
一方、Operaで閲覧した場合は、本文部分がページの幅に合うようになります。
利用したページはNetFront Mobile Content Viewerと同じです。
Operaでメディアタイプhandheldを適用させたい場合のCSS組込方法について
link要素、style要素、style属性いずれにも対応します。
機器やバージョンによる違いはありません。
Operaでメディアタイプhandheldを適用させたい場合の@ルールでのメディア指定について
| 組込方法と@ルール | 京ぽん | PCSV(7.x) | PCSV(8.x) |
|---|---|---|---|
| 外部CSS内で@import | 要読み直し | 非適用 | 適用 |
| 外部CSS内で@media | 要読み直し | 適用 | 適用 |
| style要素内で@import | 適用 | 非適用 | 適用 |
| style要素内で@media | 適用 | 適用 | 適用 |
京ぽんはWILLCOMの京セラ製端末（AH-K3001V以降）です。要読み直しとしているのは、一度フルスクリーンモードにしてからスモールスクリーンモードに戻さないと適用されないためです。
PCSV(7.x)はベースとなっているOperaが7.xのPCサイトビューアーが搭載されているものです。以下の機種が該当します。W21CA,W21CAII,W31CA,W31T,W32H,W32T,W33SAII,W41CA,W41H,W41S
PCSV(8.x)はベースとなっているOperaが8.xのPCサイトビューアーが搭載されているものです。上記した以外のW4ｘシリーズ、W5ｘシリーズの機種が該当します。
Operaでhandheld向けCSSを適用する場合、確実に適用できてなおかつベストな方法は、link要素でmedia="handheld"を記述することです。
今回、検証用としては、以下の2つを使っています。
コメント (5)
WX321JのNetFront 3.4はSmart-Fitモード時にhandheld用CSS適用されますよ。
投稿者: ひ。 | 2007年05月26日 13:42
日時: 2007年05月26日 13:42
＞ひ。さん
情報提供ありがとうございます。
NetFront3.4でようやくmedia="handheld"対応ですか。
もし良ければ、Smart-Fitで以下のプロパティが適用されるかどうかを教えていただけるとありがたいです。
・ブロック要素に対するfloat
・position
・display:none;
テスト用のページはhttp://hpbuilder.net/mobileopera/sample/cssproperty6.htm
にあります。
さすがに実機いじくり回せる機会に恵まれないので……
投稿者: FUMING | 2007年05月26日 22:53
日時: 2007年05月26日 22:53
スクリーンショットあげてみました。
京ぽんシリーズと違って日本無線シリーズはユーザーの間でもブラウザの調査を熱心にするという動きがあまりないですね。NetFrontにはあまり期待していないのかな。
投稿者: ひ。 | 2007年05月27日 14:34
日時: 2007年05月27日 14:34
＞ひ。さん
貴重なスクリーンショットありがとうございます。
スクリーンショットを見る限り、
ブロック要素へのfloat 適用
position 非適用
diaplay : none; 適用
ですね。
やっぱり、handheld向けにfloatはマジヤバイ。
WILLCOMで三洋や日本無線のユーザーがブラウザに対して熱心でないのは、初代京ぽんからの乗り換え組でNetFrontのダメダメさに嫌気がさしたせいもあるのかしら……と思っています。
投稿者: FUMING | 2007年05月28日 02:29
日時: 2007年05月28日 02:29
Softbank 912SHのPCサイトブラウザ（NetFront3.4）ではhandheld向けCSSは適用されないっぽい。スモールスクリーン表示に切り替えても以前のバージョン同様、screen向けのが適用される。
904iシリーズに搭載されているNetFrontのバージョンが気になるところ。
で、モバイルのネイティブアプリケーションの場合、メーカーの意向やキャリアの意向といったところもあるので、同じバージョンだからって同じように動作しないのを痛感しました。
投稿者: FUMING | 2007年06月12日 22:41
日時: 2007年06月12日 22:41