2012/02/24更新

[HTML] スマートフォン向けにWebページを表示する(viewport)

このエントリーをはてなブックマークに追加            

今日は、スマートフォン向けにWebページを表示する方法を記載したいと思います。

スマートフォン向けの設定がされていないと、すんごく小さくページが表示されることがあるはず。 それをスマートフォンの横幅縦幅に合わせて表示するための設定です。

<meta name="viewport" content="width=device-width height=device-height" />

メタ属性で上記の記載をする。そーすると、スマートフォンでも見やすいサイズで表示されます。なお、"content"に設定出来る内容は以下のようです。

content設定一覧

width 横幅 200~10000まで。device-widthという設定も可能。
height 縦幅 223~10000まで。device-heightという設定も可能。
initial-scale 初期スケール minimum-scale~maximumscaleまで。
minimum-scale 最小スケール 0~10.0まで。
maximum-scale 最大スケール 0~10.0まで。
user-scalable ユーザーによる拡大縮小を許すかどうか yes / no


スマートフォン用Webページ作成には、通常とは異なるコツが必要そうです。イベントも違うみたいだし。色々と学ぶべき事が多いですね(*゚▽゚)ノ







こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。