・テキストのサイズを調整する
iPhone版Safariでは、基本となるテキストのサイズは自動的に決定される。多くのサイトでは、iPhone版Safariで読みやすいようなテキストサイズが自動的に設定されるが、もしフォントサイズが小さすぎる、もしくは大きすぎる場合はCSSの「-webkit-text-size-adjust」プロパティで変更が可能だ。このプロパティは基本的にはCSS 1.0の「text-size」プロパティと同様の働きをするが、異なるのはiPhone版Safariでのみ効果を発揮する点だ。通常のWebブラウザ向けにはtext-sizeプロパティでフォントサイズを指定し、iPhone版Safariに向けては-webkit-text-size-adjustプロパティでフォントサイズを指定することで、iPhone版Safariとそれ以外で異なるフォントサイズでの表示が行える。
たとえば、図14は標準のフォントサイズでの表示例、図15はp要素の-webkit-text-size-adjustプロパティを150％に指定した場合の表示例だ。iPhone版Safariでは本文部が異なるフォントサイズで表示されるが、PC版Safariでは両者ともに同じフォントサイズで表示される。
|
|
| 図14 標準のフォントサイズでのレンダリング例 | 図15 p要素の-webkit-text-size-adjustを150%に指定した場合の表示例 |
・マウスオーバーで表示するメニューをクリックで表示するようにする
前述の通り、iPhoneにはマウスポインタが存在しないため、たとえばマウスオーバーでポップアップするメニューなど、特定の要素をマウスオーバーすると表示が変化するような指定は行えない。そのため、iPhoneを想定してWebサイトをデザインする場合はマウスオーバーによるポップアップではなく、マウスクリックによるポップアップを行うようにデザインを修正する必要がある。
・iPhone専用アイコンを用意する
iPhone版Safariでは、Webサイトをブックマークする際に「ホーム画面に追加」というオプションを選択できる。これを選択すると、iPhoneのホーム画面にそのWebサイトをワンクリックで呼び出せるボタンを追加できる（図16）。「ホーム画面に追加」を行う際、通常はそのWebサイトのスクリーンショットがボタンとして利用されるのだが、サイト側でアイコンを指定することも可能だ。たとえば、図17のようなアイコン（ファイル名はapple-touch-icon.png）を指定したい場合は、HTMLファイルのheadタグ内に次のように記述すればよい。
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
|
|
| 図16 iPhone版Safariのブックマーク追加画面 | 図17 左が用意したボタン画像、右がiPhoneのホーム画面に表示されるボタン画像 | |
なお、アイコンがボタンとして登録される際には自動的に角が丸められ、ドロップシャドウや光沢が追加されてiPhoneらしいボタンになる。画像のサイズは任意だが、この加工が加えられることを考慮すると、画像サイズは57×57ピクセルで、影や光沢がないものが望ましいようだ。
（後編に続く）