サイトのトップページを iPhone & iPod touch でブラウズする際に見やすくレイアウトしました。どうぞ、iPhone で appling.jp へアクセスして確かめてください。見よう見まねで作ったんですが、これまでのスタイルシートの感覚と違うのと、情報が少ないのでかなり迷いました。
主要なウェブブラウザでレンダリングテストは行っています。(Internet Explorer 6 以下は問題外)
新たにウェブページを作ることなく、既存のウェブページにスタイルシートだけで対応しています。つまり、デスクトップアプリケーションと iPhone で見る HTML ドキュメントは同じってこと。
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /> <link rel="stylesheet" media="only screen and (max-device-width:480px)" type="text/css" href="iphone.css" /> <link rel="stylesheet" media="screen and (min-device-width:481px)" type="text/css" href="style.css" /> <!--[if IE]> <link rel="stylesheet" media="screen" type="text/css" href="style.css" /> <![endif]-->
body { min-height: 420px; margin: 0; padding: 0; font-family: Helvetica; font-size: 14px; -webkit-text-size-adjust: none; }
link 要素でスタイルシートを振り分けています。今回、最も時間がかかったのが meta 要素の属性と値の部分。思い通りの表示ができるまで何度も書き換えてやっと見つけたものです。それと、スタイルシートの min-height: 420px; は一緒に使わないと文字の大きさが変わってくるんですよね。ということで、iPhone View バージョン 0.1 の出来上がりです。
