• RSS

[HTML]スマホサイトでお世話になる <meta name=”viewport”> の設定のまとめ

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

meta viewport は、デバイスに応じてウィンドウの幅や高さを調整できたり、画面を拡大縮小率を調整したりと、表示領域を設定する上で重要なメタデータです。

特に、スマートホンやiPad などのタブレット向けにサイトを構築したり最適化する際に、<head> 内に meta viewport を設定しておかないと上手く収まってくれません。

meta viewport の記述例

以下のように <head> 内に指定します。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

meta viewport の属性

content に指定する値はサイトに応じて調整します。
widthピクセルで指定。初期値は 980px。
device-width で、デバイスの横幅に合わせる。
heightピクセルで指定。初期値は auto。
device-heightで、デバイスの高さに合わせる。
initial-scaleページ読み込み時の拡大率の指定。初期値は 1。
minimum-scale拡大率の最小値。初期値は 0.25。
maximum-scale拡大率の最大値。初期値は 1 .6。
user-scalable拡大操作(ピンチイン/ピンチアウト)の許可。
初期値は yes。拡大操作を許可しない場合は no。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください