Travellers Tales

Google が Google AJAX Search を利用した iPhone 用の検索ページを公開しましたね。

iPhone 用にどんな設定をしているのか興味があったので、ソースを見てみました。私の理解の範囲で解説してみます。

viewport の設定

はじめのほうに

<meta name="viewport" content="width=320; user-scalable=no;">

という記述があります。iPhone Development Guidelines に解説がある viewport が設定されています。

※ なお、viewport の設定の区切りでセミコロンを使うのは望ましくありません。詳しくは「viewport 属性の区切りはセミコロンではなくカンマ」を参照。

viewport、すなわち表示領域を width=320 にしているということは、通常のブラウザでウインドウ幅を 320px にしたことに当たります。

iPhone の画面サイズは、縦表示のときには幅 320px ですでの、拡大率は等倍、18pt の文字はそのまま 18pt で表示されることになります。

なお、viewport の width を何も指定しなかった場合は、デフォルトで 980px になりますので、そのときは 1/3 程度に縮小されて表示されると思います。画面の真ん中 1/3 あたりに寂しく検索フィールドたちが表示されることになるわけです。

viewport は user-scalable=no に設定しているので、ダブルタップやピンチ動作で、ユーザが画面の拡大率を変えることはできません。

なお、上記設定の代わりに、

<meta name="viewport" content="initial-scale=1, user-scalable=no" />

としても同じ表示になるのではないかと思います。拡大率は等倍で、ユーザの拡大縮小動作を禁止する設定になります。

スタイルシート等

特に目新しいところはないように思われます。外部スタイルシートとして以下のものを読み込んでいますが、これは Google AJAX Search のサンプルで一般的に使われているもので、特に iPhone 用ではありません。

@import url(http://www.google.com/uds/css/gsearch.css);

body の直下に

<div id="viewport">

があり、width : 300px; に設定されています。iPhone の画面サイズに合わせた設定でしょう。

margin : 0 auto; ですので、左右は中央寄せで表示されます。画面幅が 320px なので、左右に 10px ずつ余白ができることになるんでしょう。

ちなみに、以上の話は、iPhone のスクリーンを縦に使っていることを前提として書いています。横にすると、幅が 480px になるので、若干結果が変わってくると思います。

関連記事

追記

後からこんな記事を目にしましたが、iPhone Search に合わせて立ち上げたのでしょうかね。