iPad向け Web Pageのための基本情報
iPad向けに Web ページを作成する場合、いくつか知っておかなければならない事があります。
User-AgentによるiPadの検出
まず、iPadと他のページを切り替えたりする場合、User-Agentを知っておく必要があります。
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
JavaScriptでも検出可能です。
function isIPad() {
return navigator.platform == "iPad";
}
画面のサイズと向き
iPad の画面サイズは、768x1024となっています。これは、向きを変えると変わるようにも思われますが、実は固定です。幅と高さの情報以外に、orientationという情報により向きを確認できます。
JavaScript 値 備考 screen.width 768 iPadの向きに関係なく固定 screen.height 1024 iPadの向きに関係なく固定 window.orientation 0 iPad垂直時 (portrait) 90 左へ90度回転させて水平にした時 (landscape) -90 右へ90度回転させて水平にした時 (landscape) orientationchange 回転時のイベント
HTML5
Doctype
HTML5からドキュメントタイプの指定が単純になりました。
<!DOCTYPE html>
Character Encoding
HTML5から文字コードセットの指定が単純になりました。
<meta charset="utf-8">
スタイルシート
垂直／水平と行った向きによってスタイルシートを変更する事が出来ます。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
ホーム画面のアイコンを指定出来ます。
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
iPad 関連の情報
- Safari Interactive Visual Effects
- Preparing Your Web Content for iPad
- jQuery mobile (JavaScript)
- iScroll (JavaScript)
Swipe Sample
キャプチャーサンプル
-
リンク付きサンプル
