「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

順番に見ていきましょう。
まずは予備知識として「HTMLファイル」と「metaタグ」について簡単に説明します。
「そんなの説明されなくても知ってるよ！」な人は適当に読み飛ばしてください。

HTMLファイルは、ざっくり説明すると「ホームページのファイル」です。

あなたがホームページを見ようとすると、まず、ホームページを見るときに使うソフト（Webブラウザ）からホームページのファイルが置いてあるコンピュータ（Webサーバ）に対して「このページをおくれ」と お願いが出されます。



そのお願いに対して、WebサーバさんからWebブラウザさんに「ほれ、そのページだよ」と お返事がきます。



お返事を受け取ったWebブラウザさんは、受け取った内容（ホームページのファイル）を画面上に表示してくれます。



この流れにおいて受け渡しされるファイルがHTMLファイルです。



実際にはHTMLファイル以外のファイル（画像ファイルとか）も受け渡しされますけどね。
メインとなるファイル、ホームページの中身が書いてあるファイルがHTMLファイルです。

metaタグは「人の目には見えない、ホームページに関する説明書き（を書くときに使う目印）」です。

HTMLファイルの中身は

１．ヘッダ部
２．ボディ部

の2つで構成されています。



ヘッダ部に書かれているのは、そのHTMLファイルの説明書きです。
例えば「どんな種類の文字で書かれていますよ～」や「このファイルのタイトルは○○ですよ～」といった内容が書かれています。



ボディ部に書かれているのは、そのHTMLファイルの中身です。
みなさんがホームページを見たときに表示される内容が書かれています。
ここに書かれている内容がHTMLファイルの本体と言えるでしょう。



metaタグは、HTMLファイルのヘッダ部に

<meta name="hoge" content="ほげほげ">

のような形式で書く「そのページの説明書き」です。



あるいは、その説明書きを書くときに使う目印「<meta　～　>」がmetaタグです。



metaタグに書かれている内容は、人間様には見えません。
Webブラウザさんや、ホームページの情報を収集して回っているプログラム（検索エンジン）に向けて書かれる情報です。



metaタグには、いろいろな種類があります。
また、日々増えています。

以上を踏まえて、いろいろあるmataタグのひとつで

「このページは、こんな感じで表示してよ」とスマホ向けの指示を書くmetaタグ

が「viewport」です。



実際のviewportは、例えば

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

のように書きます。
この例では「横幅は画面の幅と合わせて、最初は1倍の拡大（つまり拡大しないで）表示してよ」と言っています。
指示はセミコロン「;」区切りで複数書けますよ。

この指示が書いてあると、スマホのWebブラウザさんは指示に従ってページを表示してくれます。
パソコン用のWebブラウザさんはシカトしてぼーっとしてますけどね。

ちなみにviewportを使ってできる指定は以下の通りです。