HTMLの疑問、viewportを整理してみる。

HTMLを勉強し始めて数日、だんだん記述したコードがブラウザ上に反映されていく事にも慣れてきました。

例によって個人用ですが、おや？どういった意味かなと思ったコードを自分に解説したいと思います。

↓そのコードがこちら↓

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

viewportの設定は少々難しいらしいので、私の読んでいる教本では読み飛ばしても大丈夫という事でしたが、せっかくなので理解したいなぁと思います。

<meta name="viewport" content="">と記述する事により、

Webページの表示する領域を操作できるようです。

まだ理解が追い付いてはいませんが、表示する領域というと、

縦幅や横幅の事を指しているのかな、とそんなことを考えました。

width=device-widthという部分では、width(画面の幅)にdevice-width(デバイスの幅)の値を代入しているようです。

なので、表示するデバイスの幅によってwidthの値が決定する為、表示する画面に対して最適な解像度に調整してくれるという事だと思います。素晴らしいです。

user-scalable=yesについては、ユーザがズームできるか否かを指定しているようです。今回はyesが代入されているので、ズームできることになりますね。noにした場合はズームを許可しないという事になります。

initial-scale=1.0の部分では、Webページを開いた時点でのズーム率を指定しているとのことです。1.0倍なので100%、すなわちそのままの手を加えていない拡大率ということになりますね。

仮に数値を2.0に指定すれば、2.0倍になるので最初からドアップになりそうですね。

今回ご紹介したviewportは最初何のことやらサッパリといった感じでしたが、ひとつひとつ噛み砕いていけば、易しい要素で構成されている事がわかりました。ひとつの<>の中にごちゃっと詰まっていると難しいように見えますがｗｗ

画面上に表示するサイズをデバイスの画面幅に委ねるという自動化のタグを入れておけば、毎回コピペで十分という考え方もできるような気もしますが、理解しておけばのちのち役立つような気も致しますので、細かく理解していけたらなと思います。

また何かおや？と思ったタグや仕様があれば取り上げたいと思います。

それではまた次回！