iPhone関連 > iPhoneサイト構築

iPhoneサイトの構築

viewport について

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

縦表示portlait320px
横表示landscape480px

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

表示倍率

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

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


【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 を使用してスマホサイト構築 を参照。


トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-11-30 (火) 21:08:24 (3703d)