- 追加された行はこの色です。
- 削除された行はこの色です。
[[HTML]] | [[HTML/HTML 4.01]] | [[HTML/XHTML 1.0]]
下記のサンプルプログラムを中心にHTML 5で色々試した内容をまとめています。
『はじめて作る人のためのiPhoneウェブ・アプリケーションfor Windows』~
佐藤信正著 Rutles刊
*シンプルなスマートフォン対応HTML 5フォーマット
#pre{{
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<title>シンプルなスマートフォン対応HTML 5フォーマット</title>
</head>
<body>
<h1>シンプルなスマートフォン対応HTML 5フォーマット</h1>
</body>
</html>
}}
*色々省略したHTML 5フォーマット
<!DOCTYPE html>
<meta charset="UTF-8">
<title>色々省略したHTML 5フォーマット</title>
<p>Hello!</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記述例
*リンク
-[[スマートフォン対応でよく使うhtml、css、javascriptのまとめ>http://kazu69.net/blog/memo/1023]] ☆☆☆
-[[これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ | てっく煮ブログ>http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/]]
