下記のサンプルプログラムを中心にHTML 5で色々試した内容をまとめています。
『はじめて作る人のためのiPhoneウェブ・アプリケーションfor Windows』~
佐藤信正著 Rutles刊
*サンプル１：シンプルなhtml5記述例
<!DOCTYPE html>
<meta charset="utf-8">
<title>ラッキーナンバー</title>
<p>ラッキーナンバーは？７</p>
**結果
第１世代のiPod touch、iPad供に画面左上にとても小さく表示されました。~
特にiPod touchは画面が小さいので、文字が潰れて見えないくらいでした。~
画面サイズが980x1470と見なして表示されているそうです。~
**その他の特徴
-画面全体に対する文字のバランスはどちらの端末でも同じ比率
-ピッチで画面を拡大・縮小可能
-傾き可能な設定のとき、画面を横長に傾けると画面が横長
-画面を横長にすると１行目の横幅が広くなるが、これに合わせて文字が１行全体長さとの比率を保って拡大
これではiPhoneで見たとき文字が小さすぎます。viewportを使うと表示する画面サイズを指定できます。~
設定方法は２種類あります。~
~
***大きさがiPhoneの端末で画面設計し、iPadではそれを拡大する場合
<meta name="viewport" content="width=320">
iPod touchでは画面が横幅に対してほどよく文字が拡大しました。~
iPadではその画面が拡大された、大きめの文字の画面となりました。
***大きさがiPhoneの端末で画面設計し、iPadでは高解像度で情報量を多くする場合
<meta name="viewport" content="width=device-width">
iPod touchでは画面が横幅に対してほどよく文字が拡大しました。~
iPadでは指定しない場合と同じく小さい文字サイズでした。~
~
viewportにはセミコロンで区切って他にも設定できます。
|設定項目|範囲|デフォルト値|内容|
|width|200〜10000|980|viewport幅のピクセル値|
|height|223〜10000|widthから比例した高さ|viewport高さのピクセル値|
|user-scalable|yesまたはno|yes|見た目を拡大できるかどうか|
|initial-scale||1.0|拡大率初期値|
|minimum-scale|0〜10.0|0.25|最小拡大率|
|maximum-scale|0〜10.0|1.60|最大拡大率|
*サンプル２：iPhone用の拡大率を考慮したhtml5記述例
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=320">
<title>ラッキーナンバー</title>
<p>ラッキーナンバーは？7</p>
*サンプル３：CSSを少し用いたiPhone用のシンプルなhtml5記述例
