CSS for MobileOpera
モバイル機器へのCSS適用は、以下のパターンが考えられる。モバイル機器向けのメディアタイプはhandheldとなる。
CSSを適用する際には、DOCTYPEスイッチの存在を考慮する必要がある。
京ぽんシリーズのスモールスクリーンモードでCSSを適用する場合、以下の4つの方法のいずれかを取る。
CSSを使うメリットを考慮した場合、link要素のmedia属性でhandheldを指定するのがベストであり、style要素での指定はおすすめしない。
MINEタイプ：application/xhtml+xml版テストページ
PCサイトビューアーの場合、screenを解釈する。ただし、対応プロパティがかなり限定されている。color、background-color、float以外には対応しない。詳しくは、対応プロパティ - PCサイトビューアーのサンプルで確認のこと。
なお、読み込ませるCSSのメディアタイプにhandheldが含まれていると、handheldのCSSが優先される。
なお、Operaのバージョンが7.6の機種は、@import規則でメディアタイプを指定した読込に対応していない。8.0以上のモノは問題ない。
ニンテンドーDSブラウザーの場合、screenを解釈する。ただし、対応プロパティがかなり限定されている。color、background-color、float以外には対応しない。詳しくは、対応プロパティ - PCサイトビューアーのサンプルで確認のこと
なお、読み込ませるCSSのメディアタイプにhandheldが含まれていると、handheldのCSSが優先される。
@importの読込にも問題ない。
通常モードの場合は、tvが優先的に適用される。
縦長モードの場合は、screenが適用される。
パソコン版のOperaでは、バージョン7からスモールスクリーン表示が出来るようになっている。（Windows用、Linux用だとShift + F11 ）。
パソコン版のスモールスクリーン表示は、メディアタイプhandheldに対応しているが、実装とは異なる部分が大きく分けると２つある。
一つは、メディアタイプがhandheldのCSSが適用された場合、画面の幅までは再現されなくなる。
もう一つは、適用方法が異なる場合がある。パソコン版OperaはWindows用で検証。表の見出しで京ぽんは京ぽんシリーズ、PCSVはPCサイトビューアー、DSはニンテンドーDSブラウザーのことを指す。
| テストNo. | 京ぽん | PCSV | DS | PC(7.53） | PC(9.01） |
|---|---|---|---|---|---|
| 1 | 適用 | 適用 | 適用 | 適用 | 適用 |
| 2 | 非適用 | 適用（注2） | 適用（注2） | 非適用 | 適用（注2） |
| 3 | 適用 | 適用 | 適用 | 適用 | 適用 |
| 4 | 適用（注1） | 適用 | 適用 | 適用（注3） | 適用 |
| 5 | 非適用 | 適用（注2） | 適用（注2） | 非適用 | 適用（注2） |
| 6 | 適用（注1） | 適用 | 適用 | 適用（注3） | 適用 |
| 7 | 適用（注1） | 適用（注4） | 適用 | 適用（注3） | 適用 |
| 8 | 非適用 | 適用（注4） | 適用（注2） | 非適用 | 適用（注2） |
| 9 | 適用（注1） | 適用（注4） | 適用 | 適用（注3） | 適用 |
| 10 | 適用 | 適用 | 適用 | 適用 | 適用 |
| 11 | 非適用 | 適用（注2） | 適用（注2） | 非適用 | 適用（注2） |
| 12 | 適用 | 適用 | 適用 | 適用 | 適用 |
| 13 | 適用 | 適用 | 適用 | 適用 | 適用 |
| 14 | 非適用 | 適用（注2） | 適用（注2） | 非適用 | 適用（注2） |
| 15 | 適用 | 適用 | 適用 | 適用 | 適用 |
| 16 | 適用 | 適用（注4） | 適用 | 適用 | 適用 |
| 17 | 非適用 | 適用（注4） | 適用（注2） | 非適用 | 適用（注2） |
| 18 | 適用 | 適用（注4） | 適用 | 適用 | 適用 |
| 19 | 非適用 | 適用（注2） | 適用（注2） | 非適用 | 適用（注2） |
| 20 | 非適用 | 適用（注2） | 適用（注2） | 非適用 | 適用（注2） |
| 21 | 適用 | 適用 | 適用 | 適用 | 適用 |
| 22 | 適用（注1） | 適用（注4） | 適用 | 適用（注1） | 適用 |
| 23 | 適用 | 適用（注4） | 適用 | 適用 | 適用 |
（注1）一度フルスクリーンモードにしてから、スモールスクリーンモードにすると適用される。
（注2）メディアタイプがscreenに対応しているプロパティしか適用されない
（注3）一度通常表示にしてから、スモールスクリーン表示にするとhandheld用が適用される
（注4）Operaのバージョンが7.6の場合は適用されない。8.0以上なら適用される。