解決方法

  • <head>タグ内にruby<meta name="viewport" content="width=device-width">を設定してください。

  • すでに設定されている場合、<meta name="viewport" content="width=640px">のように「width」に固定値が指定されているようであれば、「width=device-width」に上書きすることで表示が閲覧デバイスごとに最適化されます。

    注意:
    「viewport」には、「width=device-width」、「initial-scale=1.0」、「minimum-scale=1.0」などの値を設定できますが、サイト管理者に確認して最適な値を設定するようにしてください。
    また、サイトの設計によって「viewport」の設定以外に、CSS によるスタイルのカスタマイズを必要とする場合があります。

タグの確認方法

Chromeでの確認:

  1. 配信先サイトを閲覧している状態で、メニューから「表示」→「開発 / 管理」→「デベロッパーツール」を開きます。
  2. 左上ツールバーのデバイス切り替えをクリックし、ブラウザーエミュレーターから任意のデバイスを選択して配信先サイトを再読み込みします。
  3. Windows をお使いの場合は「alt+F」、Mac をお使いの場合は「⌘+F」で「viewport」と入力すると、「viewport」タグがハイライト表示されます(「viewport」タグが存在しない場合は、ハイライト表示されません)。