スマートフォン向け


meta viewport

 スマートフォンは最近のは画面の解像度は高くても画面が小さいので、文字や画像などはある程度大きくないと見づらく使いづらいです。それにたいてい縦にして使うので、横長のパソコン画面とは違った配慮が必要です。

 metaタグのviewportを使うと、これらをうまく解決できるようです。書き方ですが、次のようにします。

<meta name="viewport" content="property=value, property=value, ..." />

 このプロパティの具体的内容ですが、次のようなものがあります。

プロパティ
width幅。デフォルト値は980px。"device-width"を値の代わりに設定できる。
height高さ
initial-scaleズームの初期値。minimum-scaleからmaximum-scaleによって定義された範囲の値を指定。
minimum-scale最少の縮小率。デフォルトは0.25。
maximum-scale最大の拡大率。デフォルトは1.6。
user-scalableユーザが拡大操作をできるかどうかをyes / no で指定する。デフォルトはyes。

サンプルページへ

 

このページの先頭へ戻る