この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
viewportメタタグ
HTMLの <head> に必ず書かれる次の一行について見ていきます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
この一行が書かれていない場合、スマートフォンでPC向けサイトを見たときに次のように表示されます。
- ブラウザは、画面幅を無理やり 980px や 1024px といったPCの幅としてページ全体を読み込む。
- そのPC幅のレイアウトを、スマートフォンの小さな画面に収まるように縮小して表示
つまり、文字や画像が米粒のように小さくなってしまいます。
そうならないために、viewportメタタグと width 、initial-scale プロパティを指定します。
width=device-width は、ページの幅を、そのデバイスの実際の画面幅に合わせなさいという指示になります。
initial-scale=1.0 は、ページを読み込んだときに最初のズーム倍率を1.0倍にしなさいという指示になります。
作成した回答
この2つのプロパティは、ウェブページをスマートフォンなどのモバイルデバイスに適切に表示させ、レスポンシブデザインを機能させるために必須の記述です。
width=device-width は、表示領域の幅を、アクセスしているデバイスの実際の画面幅に合わせます。これにより、デスクトップ用として広い幅で表示されるのを防ぎ、CSSのメディアクエリが正しく機能して、デバイスに最適化されたレイアウトが適用されます。
initial-scale=1.0 は、ページが最初に表示される際のズーム倍率を100%（等倍）に設定します。これにより、ブラウザが勝手にページを縮小表示するのを防ぎ、ユーザーは拡大・縮小操作をすることなく、自然な大きさでコンテンツを閲覧することができます。