iPhone向けWebサイトまとめ


【iPhone版Safariの特徴】
  • 解像度は480×320ドット
  • 画面上部にステータスバー(h:20px)やURLバー(h:60px)、画面下にボタンバー(h:44px横画面時28px)が表示
  • Web表示エリア(w:320px, h:356px)、横表示のとき(w:480px, h:212px)
  • デフォルトではWebページの横幅が980ピクセルであると仮定してレンダリングされ、iPhoneの横幅320ピクセルにあわせて縮小される
  • Webページの横幅として800ピクセルを想定している場合、次のように指定すればよい。
<meta name="viewport" content="width=800">

  • 基本となるテキストのサイズは自動的に決定される
  • p要素の-webkit-text-size-adjustプロパティを150%に指定したりして調整すべし。

  • Webサイトをブックマークする際にiPhone専用アイコンを用意しとくといい。
<link rel="apple-touch-icon" href="apple-touch-icon.png">)
  • サイズは57×57ピクセルで、影や光沢がないものが望ましい。

  • マウスオーバーイベントは対象となるオブジェクトをタッチした際に発生する(この際、マウスクリックイベントも同時に発生する)
  • あるオブジェクトをタッチしたあと、別のオブジェクトをタッチすると、先にタッチしていたオブジェクトにマウスアウトイベントが発生する。
  • スクロールバーが存在しない(スクロールはタッチ操作)
  • フレームはスクロールバーなしで間延び全表示

  • ファイル制限
    • GIF、PNG、TIFF画像(画素数2Mpxまで)
    • JPEG画像(画素数32Mpxまで。それ超えたら2Mpx以下にサブサンプリング表示)
    • アニメGIF(ファイルサイズ2MBまで。それ超えたら最初のフレームのみ表示)
    • canvas要素(ファイルサイズ2MBまで)
    • その他HTML、CSS、JavaScriptファイルなど(ファイルサイズ10MBまで。)

  • 同時に表示できるWebページ数は8つまで。
  • JavaScriptの実行時間は最大10秒間。超えると途中で強制中断。
  • フォームにて
    • [ファイルをアップロードする]ボタンでアップロードできない
    • テキストエリアの入力時、キーボードが出現。
    • セレクトボックス(<select>~</select>)要素の選択時にでかく表示される。
  • 「mailto:<メールアドレス>」でメールアプリ起動
  • 「tel:<電話番号>」で通話アプリ開始
  • Google Mapへのリンクでマップアプリ起動
  • YouTubeリンクでYouTubeアプリ起動
  • iTunes StoreへリンクでiTunesアプリ起動
  • 電話番号と思われる文字列は自動的にクリッカブルに
  • 「window.open()」関数は、「新規ページで指定したURLを開く」という動作に
  • ダイアログを表示するJavaScript関数は、alert()とconfirm()、prompt()のみサポート
  • FlashやJavaアプレット(表示するのにプラグインが必要なコンテンツ)には非対応
  • 再生可能なファイル
audio/3gpp、audio/3gpp2、audio/aiff、audio/x-aiff、audio/amr、audio/mp3、audio/mpeg3、
audio/x-mp3、audio/x-mpeg3、audio/mp4、audio/mpeg、audio/x-mpeg、audio/wav、
audio/x-wav、audio/x-m4a、audio/x-m4b、audio/x-m4p、video/3gpp、video/3gpp2、
video/mp4、video/quicktime、video/x-m4v


【参考】
iPhone対応Webサイト構築入門(前編)
http://sourceforge.jp/magazine/08/10/30/1051230

iPhone対応Webサイト構築入門(後編)
iPhone専用ページをつくる、以降。
http://sourceforge.jp/magazine/08/10/31/0839204








today: -
yesterday: -
最終更新:2010年02月23日 18:11