iPhone/iPod Touch 対応サイトを作る

The Django Book (日本語) サイトをiPhone/iPod Touchに対応させてみました。iPhone対応サイトを作る方法はいくつか(iUiUniversal iPhone UI KitjQuery Touch等が有名)ありますが、今回はCSSのみを用いて実装することにしました。既存サイトをiPhone/iPod Touchに対応させるには一番近道だと思います。大きな変更点は3点です。
  • 画面のリサイズを無効化する
    以下のようなコードをheadタグ内のmetaタグとして追加します。

    <meta content="width=device-width; maximum-scale=0.6667; user-scalable=0;" id="viewport" name="viewport" />
  • iPhone/iPod Touch用のCSSを追加する
    以下のようなコードをheadタグ内のlinkタグとして追加します。どうやらIEはいつもどおり対応していないようなので、IE以外に読み込ませるよう ですね。iPhone/iPod Touchの画面サイズが480pxで、画面サイズが480pxより小さい場合にはこのCSSを読み込まれます。PC用のCSSを読み込むlinkタグよりも後ろに追加する必要があります。

    <link href="/css/iPhone.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
  • タッチアイコンを追加する
    サイズが60px×60pxのpng画像を用意し、その画像をタッチ用のアイコンとして指定します。favicon同様、以下のようなコードをheadタグ内のlinkタグとして追加します。

    <link href="/apple-touch-icon.png" rel="apple-touch-icon" />
CSSを書く時に注意するポイントがいくつかあります。
  • PC用に横幅を固定している場合は、横幅を100%で上書きする(表示がくずれる)

    #doc{width:100%;min-width: 100%;}
  • white-spaceは改行する(white-space部分の最大長が画面幅になり、表示が崩れる)

    cite, pre {overflow:scroll; white-space: pre-wrap;}
  • 長い単語は改行する(長いURLとか書いちゃうと上記同様の現象が発生する)

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{word-break: break-all;}
 CSSはそれを読み込んだ順序でどんどん上書きしていきます。それを利用すると既存サイトのCSSをちょっと上書きするだけで、すぐにiPhone/iPod Touch 対応サイトになります。対応するとユーザビリティがぐんと向上しますね。

コメント

このブログの人気の投稿

Python から Win32 API 経由で印刷する

財務諸表 (Financial Statements)

Netflix のスケール - オートメーション編