iPhone 用にどんな設定をしているのか興味があったので、ソースを見てみました。私の理解の範囲で解説してみます。
はじめのほうに
<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 に合わせて立ち上げたのでしょうかね。
]]>