iPhone生活

ここでは、デフォルトのブックマークである「iPhone用Yahoo!Japan」を取り上げます。

今回取り上げるiPhone用Yahoo!Japanの特徴

実際のiPhone用Yahoo!Japanは、Javascriptによるニュースのスクロールや、CSSでの画像のレイヤー構築など複雑な処理がありますが、 今回はこのうちの一部として以下を取り上げます。

• iPhoneを回転させても拡大・縮小しない
• iPhone用Safariで文字を拡大させない
• iPhone回転ごとに処理を行う
• iPhone縦持ち・横持ち用のスタイルを使い分ける

結果とソース

上記のようにほぼ再現することが出来ました。（実際のページはこちら）ソースは以下です。

                スケールで縛りを設け、回転時に拡大･縮小を防ぐ
         回転時に処理を行う



                回転時のイベントを設定

• 天気
• メール
• 占い
• 株価
• オークション
• スポーツ
• 掲示板
• 動画
• 路線
• グルメ
• My SoftBank
• サービス一覧

要点

ポイントは以下です。

initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no

スケールを固定し、回転時の拡大縮小を防ぎます。

onorientationchange

回転時のイベントを設定します

document.body.setAttribute("ort", "tate");

回転時にbodyの独自属性値ortを設定（）し、CSSに反映させます。

body[ort="(tate|yoko)"]

bodyの独自属性値ortに依存したCSSを宣言します。

解説

まず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が変動した際に別のスタイルが適用するように設定します。