サイトをスマホ用に最適化

スマートフォンから携帯サイトを見ると画面解像度の違いからか文字が小さすぎて見れたもんじゃなかったりします
そこでメタタグのviewportで可視領域の指定をする必要があります

>>指定の例
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.25,maximum-scale=1.6,user-scalable=yes" />

>>各パラメーター説明
・width
可視領域の幅
デフォルト値は980
device-widthを指定で個々のデバイス幅に指定される
・height
可視領域の高さ
デフォルト値はwidth値とデバイスのアスペクト比から算出されるので省略
・initial-scale
倍率の初期値
・minimum-scale
倍率の最小値
・maximum-scale
倍率の最大値
・user-scalable
拡大縮小の可否
デフォルト値はyes

(゜д゜)ウマー

※iPhoneもAndroidもデバイス幅は320の模様、なのでとりあえず画像は携帯サイトのままの240で事足りると思います。それとhtmlのサイズ指定は絶対指定より相対指定のほうがなにかと捗ると思います。
2011/01/15/ 15:32