概要
スマホの画面は物理的に狭いものですが、長い間ほとんどのWebサイトは、はるかに幅の広いデスクトップ画面を前提に作られてきました。こうした古いサイトを引き続き使えるようにするため、モバイルブラウザは既定で、画面の幅を約980ピクセル(だいたいデスクトップサイズ)であるかのように振る舞い、その結果全体を画面に収まるよう縮小して表示します。これが、対応していないページがスマホでは小さく縮こまって見え、誰かがピンチ操作で拡大するまでその状態が続く理由です。
viewportメタタグは<meta name="viewport" content="width=device-width, initial-scale=1">という1行のコードで、この古い既定の動作を上書きし、ブラウザに「実際の画面幅に合わせて、通常のズームでこのページのサイズを調整してください」と伝えます。これによって、レスポンシブデザイン(画面サイズに応じて変化するデザイン)がスマホでも実際に機能するようになります。
重要な理由
このタグがないと、モバイル画面向けに丁寧に再配置・サイズ調整されるよう設計されたページであっても、その機能を発揮する機会がありません。実際のデザインがどれだけよく作られていても、スマホはそれを縮小されたデスクトップレイアウトとして表示してしまいます。これは純粋に技術的な、オールオアナッシングの設定です。タグが正しく存在しているか、まったく存在していないかのどちらかで、後者の場合はサイトの他の部分がどれだけよくデザインされていても、すべてのスマホ利用者に誤ったレイアウトが表示されます。
ほとんどのサイトでWebトラフィックの半数以上がスマホからのものであるため、この1行が欠けているだけで、訪問者の大多数が内容を読み始める前に影響を受けてしまう可能性があります。
修正方法
- ページのHTMLソースを表示し、
<head>セクション内に<meta name="viewport"で始まるタグがあるか確認します。 - 見つからない場合は、
<head>セクション内に<meta name="viewport" content="width=device-width, initial-scale=1">を追加します。 - Squarespace、Wix、Webflow、WordPressなどのサイトビルダーを使っている場合、これはプラットフォームによって自動的に設定されます。タグが見つからない場合は、追加したカスタムコードがそれを上書きしていることがほとんどなので、
<head>に追加したカスタムコードを確認してください。 - 同じタグに
maximum-scale=1やuser-scalable=noを追加しないようにしましょう。これらを追加すると訪問者がピンチ操作で拡大できなくなり、別のアクセシビリティ上の問題を生みます。 - 設定後、実際のスマホ(またはブラウザのモバイルプレビューモード)でページを開き、縮小表示ではなく画面いっぱいに読みやすいサイズで表示されることを確認しましょう。