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

追加された行はこの色です。
削除された行はこの色です。
iPhoneサイト構築へ行く。

[[iPhone関連]] > iPhoneサイト構築
* iPhoneサイトの構築 [#qb8d7a5c]

#setlinebreak(on);

** viewport について [#p9ce80d8]

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

|縦表示|portlait|320px|
|横表示|landscape|480px|

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

** 表示倍率 [#s0f5112b]

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

|initial-scale|初期表示の倍率|
|user-scalable|ユーザ操作による倍率変更を許すか|
|maximum-scale|最大倍率|

&br;

【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" />

** ユーザエージェントについて [#i69646e7]

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

【JavaScriptの場合】
 if (navigator.userAgent.match("iPhone")){
    location.href = "http://xxx.xxx.xxx/iphone.html";
 }


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

** jQuery Mobile を使用してサイト構築 [#d586411c]

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

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

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