iPhone iPad向けサイトを制作するためのいろいろ

LINEで送る
Pocket

 
 

ちゃんとまとめてありませんが、自分用のざっくりしとしたメモとして。
間違えている所がありましたら教えていただけると助かります。

■画面サイズ


iPhone4

960×640(3GSまでは480×320)
HTML4.01、XHTML1.0のに対応、CSSは2と3の一部に対応
画面上部にステータスバーやURLバー、画面下にボタンバーが表示

iPad

1024×768
横幅980までに縮小表示される。
壁紙を用意するときは。1024×1024で用意

 
 

※以下基本iPhoneに関しての情報ですが、iPadについてもだいたい当てはまるんじゃないかと思います。

 
 

■マウスオーバーイベントは注意


すべての操作をタッチパネルで行うため一部のイベントの処理が異なる。
対象となるオブジェクトをタッチした際にマウスオーバーイベントとマウスクリックイベントが同時に発生する。
マウスオーバーで表示するメニューなどは、マウスクリックによるポップアップを行うように修正する。

 
 

■スクロールバーは存在しない。


 

■表示できるHTMLファイル(画像の大きさやファイルサイズ)


GIF、PNG、TIFF  画素数2メガピクセルまで
JPEG画像 画素数32メガピクセルまで
アニメーションGIF ファイルサイズ2MBまで
canvas要素 ファイルサイズ2MBまで
そのほかのファイル(HTML、CSS、JavaScriptなど) ファイルサイズ10MBまで

 
 

■JavaScriptの実行時間は最大10秒間


 
 

■フォーム要素


ファイルのアップロードを行うinput要素(<input type=”file”>)は使えない。
セレクトボックス(<select>~</select>)要素の選択時に専用のインターフェイスが表示される。

 
 

■特定のリンクをクリックすると専用アプリケーションが起動


Webページ内のGoogle Mapへのリンクをクリックすると、自動的に「マップ」アプリケーションが起動し、URLで指定された場所の地図が表示される。
YouTubeやiTunes Storeへのリンクをクリックした場合も、同様にYouTubeアプリケーションやiTunesアプリケーションが起動する。
「mailto:<メールアドレス>」や「tel:<電話番号>」といったリンクも認識可能。

 
 

■一部のwindow関連JavaScriptの動作が異なる


ダイアログを表示するJavaScript関数については、alert()とconfirm()、prompt()のみサポート。

 
 

■FlashやJavaアプレットには非対応


 
 

iPhoneがサポートする動画/音声ファイル形式


audio/3gpp 3GPP media 3gp、3gpp
audio/3gpp2 3GPP2 media 3g2、3gp2
audio/aiff、audio/x-aiff AIFF audio aiff、aif、aifc、cdda
audio/amr AMR audio amr
audio/mp3、audio/mpeg3、
audio/x-mp3、audio/x-mpeg3
MP3 audio mp3、swa
audio/mp4 MPEG-4 media mp4
audio/mpeg、audio/x-mpeg MPEG audio mpeg、mpg、mp3、swa
audio/wav、audio/x-wav WAVE audio wav、bwf
audio/x-m4a AAC audio m4a
audio/x-m4b AAC audio book m4b
audio/x-m4p AAC audio (protected) m4p
video/3gpp 3GPP media 3gp、3gpp
video/3gpp2 3GPP2 media 3g2、3gp2
video/mp4 MPEG-4 media mp4
video/quicktime QuickTime Movie mov、qt、mqv
video/x-m4v Video m4v

 
 


WebサイトをiPhoneに対応させるテクニック


 

■ページの横幅を指定する


iPhoneはWebページを表示する際、横幅が980ピクセルであると仮定してレンダリングし、横幅320ピクセル(横長は幅480ピクセル)に収まるように縮小して表示している。(iPhone4はこの倍に縮小という解釈なのかな?)
headタグ内「<meta name=”viewport” content=”000″>」で横幅を指定(000=横幅)
 

viewportで指定できるパラメータ

width 想定するWebページの幅
height 想定するWebページの高さ
initial-scale ページの初期表示スケール
minimum-scale ページの最小スケール。0以上10.0以下で指定する
maximum-scale ページの最大スケール。0以上10.0以下で指定する
user-scalable noを指定すると、ユーザー操作での拡大/縮小やスクロールを禁止

 
 

■テキストのサイズを調整する


基本となるテキストのサイズは自動的に決定している。
フォントサイズが小さすぎる、もしくは大きすぎる場合はCSSの「-webkit-text-size-adjust」プロパティで変更が可能(iPhone版Safariでのみ有効 ※iPad未確認)
「html {-webkit-text-size-adjust:000%} 」

 
 

■iPhone・iPadホーム画面用アイコンを用意する


「apple-touch-icon.png」というファイル名のPNG画像をサイトのルートディレクトリに置く。
<link rel=”apple-touch-icon” href=”apple-touch-icon.png”>
アイコンがボタンとして登録される際には自動的に角が丸められ、ドロップシャドウや光沢が追加されてiPhoneらしいボタンになる。
※角丸処理だけでいい場合は、「apple-touch-icon-precomposed.png」にする。
 

アイコンのサイズ

iPhone:57×57
iPhone 4:114×114
iPad:72×72
 
各共通化するのに256×256がいいとか、144×144がいいとか、Appleは129×129を使用しているという話があるけどよくわからない。

 
 

■各デバイスでCSSを分ける


iPhone(width: 〜480pxの端末)
<link rel=”stylesheet” media=”screen and (max-device-width: 480px)” href=”iphone.css”>

 

iPad縦(width: 481〜1024の端末が縦(portrait)のとき)
<link rel=”stylesheet” media=”screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)” href=”ipad-portrait.css”>

 

iPad横(width: 481〜1024の端末が横(landscape)のとき)
<link rel=”stylesheet” media=”screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)” href=”ipad-landscape.css”>

 

PC(width: 1025〜の端末)
<link rel=”stylesheet” media=”screen and (min-device-width: 1025px)” href=”pc.css”>


その他、こちらで検索してみてください。

 

LINEで送る
Pocket


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です