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

The Django Book (日本語) サイトをiPhone/iPod Touchに対応させてみました。iPhone対応サイトを作る方法はいくつか（iUi、Universal iPhone UI Kit、jQuery 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 経由で印刷する

Win32 API から印刷をするためには、プリンタデバイスコンテキスト (Printer DC) を利用します。具体的には以下のような順序で印刷します。 プリンタドライバからハンドルを取得する プリンタドライバのステータス API から印刷可能か同かを取得する プリンタデバイスコンテキストを作成する ドキュメントを開始する 必要であればフォント等を設定し、印字、改ページ処理などをする ドキュメントを終了する (この時点でプリンタスプールサービスに登録されるようです) プリンタデバイスコンテキストを開放する プリンタドライバのステータス API を監視し、印刷が正常に終了したかを取得する プリンタドライバのハンドルを解放する 太字の手順 (3 - 7) は Win32 API で共通ですが、それ以外の手順 (1, 2, 8, 9) はプリンタドライバに依存しているため、Python から制御したい場合はライブラリを作成する必要があります。これについては、ドライバマニュアルとにらめっこしながら ctypes.windll でがんばります・・・。プリンタ接続、用紙切れ、ミスフィード等のプリントエラーを制御する必要がなければ、書く必要はありません (排他制御が必要なプリンタを除く)。プリンタドライバ毎に変わる部分は置いといて、太字の Win32 API の部分の覚書です。 プリンタデバイスコンテキストを作成する import win32ui import win32con PRINTER_NAME = '[コンパネ -> プリンタとFAX -> に登録しているプリンター名]' PIXELS_PER_INCH = 1440 # 1 インチ毎のピクセル数 INCH_PER_POINT = 72 # 1 インチ毎のポイント数 SCALE_FACTOR = int(PIXELS_PER_INCH / INCH_PER_POINT) #　わざわざ計算せず 20 と指定する場合が多い dc = win32ui.CreateDC() dc.CreatePrinterDC(PRINTER_NAME) # 指定したプリンタ名のプリンタデバイスコンテキストを作成する self.dc.SetMapMode(win32con.MM...
続きを読む

Disqus のスケール - Django 編

イメージ
やり直し。2010 年の Django Con のスライド より。 Disqus は多くのサイトに組み込まれているサービスのため、メンテナンスによる停止が難しい。 >>> サーバの構成 エッジロードバランサーに HAProxy: heartbeat 構成。レポートが素敵。 HTTP ゲートウェイキャッシュに Varnish Django サーバとして Apache + mod_wsgi: 30 台ぐらい。メモリリークを防ぐために maximum-requests をセット。Ganglia で監視 キャッシュに memcached: 25 台ぐらい PostgreSQL ロードバランサーに HAProxy/ PgBouncer : コネクションプール用。 PostgreSQL: 10 台ぐらい。 Slony-I で非同期レプリケーションとフェイルオーバー。 ログは syslog-ng: pgFouine でスロークエリーをロギング。 全部でサーバ 100 台ぐらい。他にユーティリティサーバ 15 台、後は HAProxy と heartbeat 用に 20 台ぐらいの構成。Varnish と syslog-ng を除けば Django のデプロイ手順に掲載されているような教科書通り (良い意味です) の構成です。(なんで Apache なの？nginx + gunicorn 速いよって突っ込まれてますね >>> データベースのパーティショニング Django はアプリケーションレベルで簡単に 垂直 パーティショニングができます。アプリケーションごとに DB 分けたり、DB をアプリケーションレベルでルーティングできます ( ドキュメント )。 水平パーティショニング (a.k.a シャーディング) もアプリケーションで 書ける (なるほど・・・)。 >>> キャッシュの削除 Django は QuerySet の結果をキャッシュするけど、それがかなりメモリを消費する。なので SkinnyQuerySet を作った (たぶん Johnny Cache の方が有名？...
続きを読む

#PySpa アドベント (23 日目)

PySpa がどんなイベントかは 既に紹介されつくした感じ ですね。そもそも勉強会は "特定のテーマを共有し理解を深める" という目的のものが多いと思っています。PySpa は、それより "勉強したくなるようなテーマを発見する" ってのが大きいと個人的に思っています。私は 勉強したいテーマを見つける 童心に返って技術を楽しむ 煙草エリアのベンチを温める ために行っています。与えられてばかり、お世話になってばかりです。モチベーションしかり、趣味しかり、仕事しかり。
続きを読む