iPhoneサイト構築 - 闘うITエンジニアの覚え書き

iPhone関連 > iPhoneサイト構築

iPhoneサイトの構築 †

viewport について †

コンテンツが表示される領域を viewport といい、この属性をmetaタグに指定する事で、iphone向けの表示領域を設定する。

　※デフォルトの表示サイズは　320×356

表示倍率 †

・以下をmetaタグに指定する事で、制御が可能。

【metaタグの記述例】
　<meta name="viewport" content="width=320,initial-scale=1.0,user-scalable=yes,maximum-scale=3.0" />
　<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes,maximum-scale=3.0" />

ユーザエージェントについて †

　"iPhone" という文字列がユーザエージェントに含まれるので、
　 .htaccess や サーバ処理、javaScript でiPhone用のサイトURLに振り分けを行う事ができる。

【JavaScriptの場合】

if (navigator.userAgent.match("iPhone")){
   location.href = "http://xxx.xxx.xxx/iphone.html";
}

あとは、CSS3がそこそこ使えるらしいので使えるスタイルをチョイスしてサイト構築。
※CSS3については、別で書く予定。

jQuery Mobile を使用してサイト構築 †

　jQuery Mobile を使用してスマホサイト構築 を参照。