ここでは、デフォルトのブックマークである「iPhone用Yahoo!Japan」を取り上げます。
実際のiPhone用Yahoo!Japanは、Javascriptによるニュースのスクロールや、CSSでの画像のレイヤー構築など複雑な処理がありますが、 今回はこのうちの一部として以下を取り上げます。
上記のようにほぼ再現することが出来ました。(実際のページはこちら)ソースは以下です。
TEST スケールで縛りを設け、回転時に拡大・縮小を防ぐ 回転時に処理を行う 回転時のイベントを設定
ポイントは以下です。
まずviewportでは、初期・最大・最小スケールを1で固定し、iPhone回転時の拡大・縮小を防ぎます。 user-scalable=noだけでは回転時にスケールが変わることがあります。iPhone用Safariの解釈では、回転時の処理はユーザーによる拡大・縮小には当たらないということです。 また、コンテンツはリキッド(可変長)レイアウトを採用し、回転によるドキュメント領域の変更に対応してコンテンツ領域が変動するようにします。
回転時にイベントを発生させるために、bodyタグにonorientationchangeを設定します。
1つはiPhone User Guideでの設定と同様、下記の処理によるスクロールを目的としています。
window.setTimeout("window.scrollTo(0, 1)", 500);
一方で、iPhone縦持ち時と横持ち時のCSSを別々に用意するために、bodyタグに独自の属性値ortを設定します。 ortは縦持ちの場合(window.orientationが0または180)に「tate」、 横の地の場合(window.orientationが90または-90)に「yoko」の値をとるように設定します。
これに対し、CSSではbody[ort="tate"]、body[ort="yoko"]と属性値縛りのあるスタイルを宣言し、 回転によってortが変動した際に別のスタイルが適用するように設定します。