スマートフォンサイトの制作 - 基礎編 -

smartphone

はじめに

iPhone+Androidスマートフォンサイト制作入門を読んだことを忘れないようにメモ

iPhoneの仕様を確認

端末
  • iPhone3G
  • iPhone3G S
  • iPhone4
  • ipad
解像度
  • iPhone3G、iPhone3G S : 320 x 480px
  • iPhone4 : 640 x 960px
iPhone4はiPhone3G、iPhone3G Sと比べて解像度が2倍あるが、
ブラウザーは100%表示時に320 x 480pxで表示する仕様になっている為、見た目が変わらない
ブラウザ
プラグイン
文字コード
・表示された文字コードを変更できないため、metaタグで正しく文字コードを指定する
・テキストファイルに直リンクを貼り表示させる場合はShift JISでしか見えない
ウィンドウ制御
    • ウィンドウ制御ができない
・iPhoneアプリ常に全画面表示され、ウィンドウサイズの変更ができない
・JavaScriptによポップアップウィンドウは標準で警告ができるように設定されている
ファイルアップロード、ダウンロード
  • ファイルのアップロード、ダウンロードができない
コンテンツ制限

くわしくはSafari Web Content Guide

  • ファイルサイズなどに制限事項あり
    • GIF/PNG/TIFF画像：デコード時の状態で3Mpx以下
    • JPEG画像：デコード時の状態で32Mpx以下
    • canvas要素：3Mpx以下
    • HTML、CSS、JavaScriptなどの各ファイル：各10MB以下
    • JavaScript：処理時間10秒まで
フォント
  • 日本語フォントはゴシック体(ヒラギノ角ゴ)のみ

Androidの仕様を確認

端末
  • 各キャリアで様々
解像度
  • 各キャリアで様々
320 x 480px〜640 x 960pxと幅があるが、基本iPhoneの320 x 480pxとして考える
ブラウザ
Flash対応
  • Flash Playerが標準で搭載されている
文字コード
ファイルのアップロード、ダウンロード
  • ファイルのダウンロードのみ対応
画像
  • GIF/JPEG/TIFF形式に対応
  • SVG形式はAndroid2.2以降のみ対応
コンテンツ制限
  • 決まったドキュメントはない
  • 作成するときはiPhoneの制限を参考にするのがよい
フォント
  • Droid Fontと呼ばれる標準のフォントもしくは端末メーカ独自のフォントが搭載
  • メーカごとにことなる為、標準的なゴシック体をベースに作成すること

エミュレータ