レスポンシブウェブデザインにおけるviewportの意味と使い方

img_viewport5

レスポンシブウェブデザインを経験した事がある人は一度は見た事があるはず。

「viewport」

そう、metaタグにいつのまにか混ざってくるあいつです。それこそ、おまじないのように設置してるだけという人も多いかと思います。でもこのviewportさんはとても重要なお仕事をしています。今日はviewportさんとは何者かについて調べてまとめてみましたのでこれを機にviewportさんを使いこなしてあげてもらえれば幸いです。

スポンサーリンク

viewportとは

レスポンシブのサイトを作った事がある人は下記のようなmetaタグを見た事があると思います。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

viewportをそのまま直訳するとview「見える」port「港」です。つまり港を見ろ!!って事ですね!いえ、違います。
weblioさんでは「表示域」とされています。
( http://ejje.weblio.jp/content/viewport より)
レスポンシブウェブデザインは表示域がものすごく関係してそうですし、つまり表示域に対して何かしら働きかけてそうな雰囲気ですね!

viewportは何をしてくれるの?

なんとなくイメージが湧いてきたかと思うのですが、viewportは表示に関する制御を行ってくれているようです。
では実際何をしてくれるのか?
viewportが出来る事をまとめてみました。
viewportに設定できるプロパティと説明

width

幅です。ピクセル数もしくは「device-width」と書く事で機種の幅を取得してくれます。

height

高さです。ピクセル数もしくは「device-height」と書く事で機種の高さを取得してくれます。

initial-scale

初期倍率です。ページを開いた時の倍率という事ですね。0~10(1.1等の小数点第一位もOK)で指定します。

minimum-sacle

最少倍率です。これ以上は小さくさせないで!という事です。0~10(1.1等の小数点第一位もOK)で指定します。

maximum-scale

最大倍率です。これ以上大きくなられると困るんだよチミィ。という事です。0~10(1.1等の小数点第一位もOK)で指定します。

user-scalable

拡大縮小の可否です。例えばユーザーにピンチイン、ピンチアウトをさせるかさせないかです。yesかnoで指定します。

viewportの使い方

ではさっそくviewportにプロパティを追加して色々試してみましょう、そうしましょう。

<meta name="viewport" content="ここにプロパティを記述するのです">

contentにプロパティを書いてあげる事で表示の制御をします。
例えばスマホで開いた時に、スマホ機種の幅の等倍させたい場合は

<meta name="viewport" content="initial-scale=1.0">

のように書きます。
これにならって色々な例を書いてみましょう。

等倍表示・ピンチイン、ピンチアウト可

<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">

等倍表示・ピンチイン、ピンチアウト不可

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

等倍表示・ピンチイン、ピンチアウト可・2.5倍まで拡大可

<meta name="viewport" content="initial-scale=1.0, user-scalable=no,maximum-scale=2.5">

等倍表示・ピンチイン、ピンチアウト可・0.5倍まで縮小可

<meta name="viewport" content="initial-scale=1.0, user-scalable=no,minimum-scale=0.5">

初期表示の幅を300pxを指定

<meta name="viewport" content="width=300">

実際にviewportのwidthをいじってみると
widthとinitial-scaleの概念がよくわからないので簡単なテストページを作って実際にスマホで表示させてみました。
使用したスマホはiphone5s(ブラウザサイズ320px)です。

幅300×高さ200の箱を表示させています。

sample1:width=device-width

img_viewport1

device-widthをwidthに設定することで、表示はiphone5sのブラウザサイズ320pxになっています。なので300pxの箱がブラウザ内にしっかり納まってますね。

sample2:width=200

img_viewport2

widthを200に設定したのでこの液晶は200px幅の比率で表示されています。その為、ページ中の300pxの箱がはみ出てしまっています。わかりにくいけど、右側にはみ出ているので右側がべったり端にくっついています。

sample3:width=initial-scale=1.0

img_viewport3

こいつがくせものなのですが、initial-scale(初期倍率)を1.0とした時に、何をもってして等倍なのか。
ブラウザサイズを基本として等倍なのか、ページサイズを基本として等倍なのか。
いまいちよくわからなかったので、中身を大きくしてみました。
img_viewport4

中身の箱を350pxにすると中身の箱が右側にはみ出てしまいました。
この検証によるとブラウザサイズを基本として等倍になるようです。
(ページサイズを基本としていたらはみ出ないはずぅー)
はい、少し謎が解けましたね。

まとめ

viewportさんの事、少しは理解が深まったでしょうか。
私は脳内メモリが少なく、脳内CPUもヘタレなので色々検証とかやってるうちに頭がパンクしそうになりましたが
なんとかviewportについて書けたかと思います。
今回は最低限これだけ知っていれば使えるという範囲で書きましたが、まだまだ奥が深いので興味のある兄貴達は更に追及してみると面白いかと思います。

最近肩こりが非常に辛いので良いアイテムがないかと探していたらこんなのを発見!
スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>