開発者ツールのデバイスエミュレーション機能を使用すると、開発中のHTMLが縮小表示される

現象
原因
対応内容

現象

開発者ツールのデバイスエミュレーション機能を使用すると、開発中のHTMLが縮小表示される現象の解決方法を記載する。なお、ブラウザでの通常表示（デバイスエミュレーション機能を使用しない）時は、本現象は発生しない。

キャプチャ画像

デバイスエミュレーション機能を使用すると、縮小表示される（本現象）

ブラウザでの通常表示時に問題はない。

手順

手順１．開発中のHTMLをEdgeで開く

手順２．開発者ツール（DevTools）の[デバイスエミュレーションの切り替え]を有効にし、Edgeの[ディメンション]として[iPhone 12 Pro]を選択する

原因

本来であれば、CSSピクセル（iPhone 12 Pro：390×844）に合わせて描画すべきところを、デバイスピクセル（iPhone 12 Pro：1170×2532）に合わせて描画したため。
横幅が狭くデバイスピクセルが細かく刻まれた端末において、要素をそのまま描画しようとしたため小さく表示された。

対応内容

以下のように、headタグ内にviewportのmetaタグを追加すれば解消する。

<head>

  <meta charset="utf-8">

  <!-- 
    コンテンツの表示領域（viewport）の幅を端末のCSSピクセル幅（device-width）に、
    拡大率1（initial-scale=1）であわせる
   -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  ...

</head>