前回からの続き。iPhoneとiPad用の「縦置きポートレイト表示」は、ひとまず良しとしましょう。今回はiPadの横置きランドスケープでの表示をアレコレ考えてみます。サラッと書くけれど、実はかなり迷走しました。
まずは前回の縦置きiPad用試作品にiPadでアクセスし、横に向けてみます。すると写真のように（↑）表示されるのですが、これはこれで正解、何ら問題ありません。
しかし、各パーツが拡大表示されるのは良いのですが、現実的に見て、iPadを横向きで使ってる人ってどれくらいの割合で存在するんでしょう？もちろんゲームとか、お絵書きアプリとか、ランドスケープ表示が適している表計算アプリ等の場合はそれで良いのですが、単にブログ日記を眺めるのにわざわざiPadを横に向ける人は居ないと思うのです。電車内でもほとんどの人がiPhoneやiPadを縦向きで使っているし、横向きで使うというのは結構レアケースなのではないか。まあ僕の場合、iPadを使うのは就寝直前、もうゴロンと仰向けになってお腹の上に乗せて眺めるのがほとんどなので、必然として横向きになるんですけどね。サンレコ電子版と楽器取説PDFを読む時くらいでしょうか、iPadを縦向きにするのは。
横向き表示の分岐方法が分からない
そんなレアな持ち方をするマイノリティーな読者向けに、横向き表示用のCSSを用意してみようと思いました。テーマとしては「縦向きとはひと味違う横向き」。当たり前ですが。さてここで、横向き用にCSSを分岐させるには、メディアクエリーってどう書けば良いんでしょう？
１．そこでまず、最近お世話になっているコチラの記事を読みつつ、下記のように追記してみました。結果は、横向き専用で追記した赤文字設定は読み込まれず「Night Head」は白文字のままでした。
html
@media screen and (min-width: 1024px) {
/*ここにiPad横向き専用CSS追記*/ ←Night Headが赤文字になるように設定。以下同様
}
２．次に「max-width」にしてみたら、iPad横向きで反映されたのは良いが、縦向きでも反映され、さらにはiPod touchの縦・横でも読み込まれてしまいました。そりゃ「1024ピクセルまで適用」としているのですから、手持ちのガジェット全ての「縦＆横」に反映されてしまうのは正解デスネ。
html
@media screen and (max-width: 1024px) {
/*ここにiPad横向き専用CSS追記*/
}
３．次は「min-device-width」〜「max-device-width」で範囲を括ってみました。ちなみに現時点で「device」の有無による差違が分かっていません。
html
@media only screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
/*ここにiPad横向き専用CSS追記*/
}
上記の場合、赤文字が反映されるのですが、iPadの縦向きでも赤文字になってしまう。768ピクセル以上としているのだから、それも正解。
じゃあ、普通に考えて「min-device-width: 769px」にすれば、縦向きは白文字で、横向きにした時だけ赤文字になると思うハズ。しかしその結果は、不思議なことに縦向きも横向きも白文字になってしまい、赤文字指定した追記CSSはスルーされてしまいました…。何でだ。
４．さらに「only screen and (min-device-width: 1024px)」↓や、「only screen and (max-device-width: 1024px)」を試してみるも、どちらも白文字という結果で、追記CSSは読み込まれず。その他いろいろ組み合わせてみたけど思う通りにならず、長い時間を迷走しました。でも、何となく規則に気付いた。
html
@media only screen and (min-device-width: 1024px) {
/*ここにiPad横向き専用CSS追記*/
}
海外の参考記事
つまりここまでの状況をまとめると、僕が分岐させていると勝手に思い込んでいた記述では、どうやらiPadは縦向き・横向きの区別をしていないらしい…。一度読み込んだCSS設定は（白であれ赤であれ）、縦でも横でもそのままで同一コンテンツ（CSS）の拡大縮小を繰り返しているだけで、全く「切替え」はしていないのです。
そこで、ググってみました。幾つか関連のありそうな記事を読み、辿り着いたのはコチラの海外記事。
iPad CSS Layout with landscape / portrait orientation modes
そう。単純だけどこういう事がしたい。ここで使用しているのは「@media only screen and (orientation:portrait)」というシンプルなもの。こんな直接的で分かり易い指定の方法があったとは！
５．そこで次のように縦置き用と横置き用の２つのCSSを記述してみました。僕の頭の中のイメージでは、これでiPad縦向きの時はタイトルが白文字で表示され、横向きにすると赤文字になる予定だったのですが…。縦向きは「orientation:portrait」が効いているのか、しっかり白文字になったのだけれど、横向きはiPhone用のCSSで表示されレイアウトが崩れてしまいました。さらに何と、iPod touchの方が赤文字で表示されてしまうという逆転現象が！
html
@media only screen and (orientation:portrait) {
/*ここにiPad縦向き専用CSS追記*/ ←Night Headが白文字になるように設定。
}
@media only screen and (min-device-width: 1024px) {
/*ここにiPad横向き専用CSS追記*/ ←Night Headが赤文字になるように設定。
}
６．そこでまた長時間トラップにハマり続け、試行錯誤の末、ふと「orientation:portraitという指定があるなら、orientation:landscapeもあるんじゃないか？」と思い、こんな感じに修正。見事にiPadの縦・横に反応して、白文字から赤文字へと交互に切り替わるようになりました！
html
@media only screen and (orientation:portrait) {
/*ここにiPad縦向き専用CSS追記*/ ←Night Headが白文字になるように設定。
}
@media only screen and (orientation:landscape) {
/*ここにiPad横向き専用CSS追記*/ ←Night Headが赤文字になるように設定。
}
…が、しかしここにも巧妙かつ大胆な、予想だにしなかったトラップが仕掛けられていました。何とiPod touchもその切替えに反応してしまうのです。つまり、iPhoneやiPod touchのようなモニタサイズが小さいガジェットは第５１回目のシンプルなCSSで表示せたいのに、何故かそれはスルーして上記iPad用CSSを読み込んでレイアウト表示してしまうのでした。何だそれは。
落とし所を発見した
珈琲を淹れました。一体この件にどれだけの時間を費やしているのかとクラクラしながらカフェインをゆっくり摂取します。現時点での問題は、portraitとlandscapeが、iPod touchにも適用されてしまう事。まあ、意味解釈としてはその挙動は正解であり何ら問題ない。でも今回、僕が実現したいCSSの分岐は次の３通り（MacBook Air以上のMac向けは次回以降）なので、縦・横に反応するのはiPadだけにしたい。
●iPhone＆iPod touchの縦向き・横向き
●iPadの縦向き
●iPadの横向き
そして再び試行錯誤を繰り返し、アレコレ必要そうな条件を加味して行って、最終的に珈琲でお腹がタプタプになった頃にようやく理想のカタチに落ち着いたのがコチラ！（注：微妙に間違っているかもしれません）
html
@media only screen
and (min-device-width: 320px)
and (max-device-width: 767px) {
/*ここにiPhone縦横両用CSS追記*/
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation:portrait) {
/*ここにiPad縦向き専用CSS追記*/
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/*ここにiPad横向き専用CSS追記*/
}
…長かった。気付いてしまえば極当たり前のこの記述。しかしここに辿り着くまでに一体何杯の珈琲を飲んだことか。でも自力で到達出来たので満足しています。これでようやく、iPod touchは縦も横もiPod touch専用のCSSで、iPadは縦・横それぞれで違うCSSで表示されるようになりました。サンプルはコチラ！（注：Macで見るとレイアウト崩れてますよ）
そんな事はいずれSiriが解決してくれる
こんなクダラナイ事でも、久々に自分で解決できると嬉しいもので、「よくそこに気付いた、オレさすが」と自分を褒めつつ食べるシルベーヌは格別でした。しかしその数日後、ふと何気なく「そもそも、@media only screen ってどういう意味？」と思い、そのキーワードでググってみたら、iPadの表示を切り替える方法として上記メディアクエリの記述が普通にアチコチで紹介されているのでした…。つまり、Googleをうまく使いこなすには、キーワードを如何にうまく選んで絞り込むか、つまり「正しい質問をすること」、それが重要だという事を改めて学んだという次第。いや、ずっと「iPad 横向き 縦向き」とかで調べてたんですが、全然分からなかったんですよ…。
しかしそんな事、１０年後にはSiriに尋ねれば全て教えてくれるわ！
しかしアレですね。iPhone6がまた解像度変えてきたらどうするんでしょうか。もう疲れているのですが。つづく。
このスマフォ・タブレット用メディアクエリは危険！
iPod touchの縦・横は分けないのか？という質問ですが、少なくともiPhoneを横向きにして当サイトを見ている人なんて居ない、と決め打ちしております。次回はMacBook Air用のCSSを追記します。
2014-05-10 ＞ VPS＆WordPress引っ越しメモ