・iPhoneで表示した場合のみ特定のCSSファイル/JavaScriptファイルを読み込むようにする
既存のWebサイトをiPhoneに最適化させる場合、HTMLファイルは既存のものをそのまま使い、iPhone版Safariでアクセスした場合のみ特定のCSSファイルやJavaScriptファイルを読み込ませる、というのがもっとも簡単な方法だろう。
iPhoneでアクセスした場合にのみ特定のCSSを読み込ませるには、HTMLファイルのheadタグ内で、次のように読み込ませるCSSファイルを指定すればよい。
<link media="only screen and (max-device-width: 480px)" href="<CSSファイル>" type=text/css rel=stylesheet>
また、iPhoneでアクセスした場合とそれ以外で使用するJavaScriptファイルを切り替えるには、headタグ内で次のように指定すればよい。
<script type="text/javascript">
<!--
if( (navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1) ) {
document.write( "<script src=\"<iPhone向けのJavaScriptファイル>\" type=\"text/javascript\"><\/script>" );
} else {
document.write( "<script src=\"<非iPhone向けのJavaSciptファイル>\" type=\"text/javascript\"><\/script>" );
}
// -->
</script>
・複数段組のレイアウトから1段組のレイアウトにする
現在の多くのWebサイトは、2段もしくは3段組のレイアウトになっている。たとえばスラッシュドット・ジャパンでは、ページ上部にタイトルや各種機能へのリンクが用意されており、ページ左側にはサイト内の各ページに遷移できるナビゲーションリンクが、ページ右側にはサイト内のコンテンツや外部サイトの更新情報が表示されるようになっている。このような複数段を使ったレイアウトは、ウィンドウの横幅が大きいPCでは有用だが、iPhoneのような表示領域が狭いデバイスの場合、これによってメインコンテンツの表示面積が著しく小さくなってしまう。そこで、まずこのような複数段を使ったレイアウトを、1段組のレイアウトに修正する。同時に、横幅もiPhoneの表示サイズに合わせて320ピクセルに設定する（図2）。
|
| 図2 Webページを1段落レイアウト、幅320ピクセルに変更した例 |