headタグの中に記述するviewportにはどんな役割があるのか？
<meta name="viewport" content="width=device-width, initial-scale=1.0">このようにheadタグの中にviewportの記載がされているサイトを見かけます。
自身でサイト制作をする時もおまじないのようにコピペするわけではなく、意味を知って記述した方が理解も早いでしょう。
今回はhtmlに記述するviewportについて説明します。
viewportとは？
現在ではほとんどのWebサイトがスマホ対応されているため、このviewportの記述は必須と言えるでしょう。
viewportを簡単に説明すると、表示する画面の横幅や縦幅を設定できる記述になります。
<meta name="viewport" content="width=400, initial-scale=1.0">例えばwidth=400を記述した場合、横幅が400pxのデバイスで確認した場合は、ぴったりのサイズになりますが350pxのデバイスだと50px分はみ出ることになります。
逆に450pxの画面だと横幅が足りずにカクツキが発生することにもなります。
initial-scale=1.0に関しては、初期のズーム倍率になります。
1.0以外にも設定することができますが、1.0の通常倍率で設定します。
一般的なviewportの設定はどれ？
横幅や縦幅など様々な設定をすることができますが、一般的には下記の設定がポピュラーです。
<meta name="viewport" content="width=device-width, initial-scale=1.0">ここのdevice-widthというのは、ユーザーが閲覧しているデバイスの横幅に合わせるというものなります。
