スマートフォン対応サイト制作 メモ①

スマートフォンのセミナーに近々参加予定なので、現在勉強中です。
忘れないためにもブログに記録しておこうかと思います。
※読みにくいかもです。

iPhoneの仕様

OSはiOSを使用。
ブラウザは「Safari」を使用。「Mobile Safari」と呼ばれることも。
画面解像度(縦): (W)320x(H)356px (上下を除いた表示領域のみ)
画面解像度(横): (W)480x(H)208px (上下を除いた表示領域のみ)
「Webkit」を採用し、HTML5+CSS3を駆使したWebページの表示が可能。
Javascriptも高速実行が可能となっている。
ただし、Flashは使用不可!!

内臓フォント
日本語は「ヒラギノ角ゴシックProN-W3」「ヒラギノ角ゴシックProN-W6」のみ
ただし、明朝体は使えない!!
英語は16種ある。
設定例)font-family: Helvetica, HiraKakuProN-W3, sans-serif;

Androidの仕様

OSはAndroid OS。
2011年5月現在バージョンは3.0(世界的にはバージョン2.2が一番多い)
※端末によっては最新のバージョンに更新できないことがある。
ブラウザは「ブラウザ」
※Googleが開発しているので、「Chrome Lite」と呼ばれることも。
画面解像度は端末によって異なる。
「Webkit」を採用。

Flash Player
一般的な携帯電話に搭載されている、「Flash Lite」ではなく「Flash Player」搭載。
PC向けのFlashを再生することが可能です。

内臓フォント
「Droid Font」またはメーカー独自のフォントが入っている。
少し前に発売された端末で「CJK統合漢字」というフォントの場合、
日本・中国・韓国の共通の漢字を使用している関係で表示がちょっとおかしい。

その他の注意点

サイトはリキッドレイアウトにする

横でも縦でも見れるようなレイアウトに!
viewportはdevice-width、コンテナはwidth:100%と設定するとよい。
※絶対指定は避けること。%指定で。
viewport設定例)
viewport→width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0

・width=device-width…横幅をデバイスの横幅に合わせる
・initial-scale=1.0…拡大縮小の初期設定
・minimum-scale=1.0…最小の拡大縮小設定
・maximum-scale=1.0…最大の拡大縮小設定
・user-scalable=0…ユーザーが拡大縮小できるか(0 または noで不可)

iPhone3GSまでの時代の設定例)
viewport→320px
コンテナ幅320px
・iPhoneを横向きにすると320px→480pxと横幅が変わるため、
使用している画像が無理やり引き延ばされてしまう。
・Androidでは引き延ばされることはないが、左右に余白ができてしまう。

■リキッドレイアウトのデメリット
・絶対配置レイアウトをしたいとき
・CSS3やJSでアニメーションなどをしたいとき
に問題があります。
全体リキッドレイアウトなので、ピクセルが変動して難しい。
横幅めいっぱい使ったアニメーションを設定しようとすると、
デバイスごとに横幅が違うので設定ができなくなる場合がある。

■Androidブラウザはviewportのwidthに数値が指定できない?
※デバイスごとに異なる可能性有
meta要素でcontent=”width”を指定せずに
Javascriptでcontent=”width=640″のような指定にしてあげるとよい。

$(window).bind('resize load', function(){
	$("html").css("zoom" , $(window).width()/640 );
});

クリックではなく、「タップ」を意識する
a:hoverによるスタイルは効かない。
タップしやすいようにボタン等のサイズは大きめに作る。

■UI用語
・タップ(PC:クリック)
・ダブルタップ(PC:ダブルクリック)
・ピンチオープン、ピンチクローズ(拡大・縮小の機能)
・フリック(指でシャッとスライドさせる)
・ドラッグ(PC:ドラッグ)

余白で情報を分けようとしない
表示領域がPCと比べて極端に小さいので、20pxとかの余白をとるのは得策でない。
Youtube等では余白を小さく、罫線やグラデーションの変化で情報を分けている。

ページ遷移より一覧表示
「次の10件を表示する」をクリックさせて次のページへ遷移させるよりも、
同一ページで続きを表示させる方がストレスなく見られる。
※あまり長過ぎてもいけないので100件くらいまでに。

ホーム画面用アイコン
名前をapple-touch-icon.pngとしてルートのディレクトリに入れる。
※iPhoneでは角丸や光沢は自動的に適用される。

お問い合わせに電話やメールを活用する
PCサイトではリンクをmailto:hoge@gmail.comとするだけでメーラーが起動されるが、
リンクをtel:xx-xxxx-xxxxとすると、電話をかけることが可能。
(かける前には確認のため、ダイアログボックスが表示される)

また気が向いたら書きます。。

Trackback


まだコメントはありません

感想・質問等受付けております。

Leave a Comment




コメント