CSS

PCブラウザでレスポンシブが効くのにスマホで効かない場合の対処法

パソコンのブラウザで幅を狭めていくと、ページがレスポンシブ対応されているのに、スマホで表示させるとページが小さく表示されてしまう。ここでは、そんな現象が起きた場合の対処法についてお話します。ちなみに、この内容はメディアクエリのことをある程度、理解されている方が対象です。

メディアクエリのことが分からない方ははじめに下記をご覧ください。

スマホでメディアクエリが効かないときの対処法

結論からお話すると、head要素に下記のメタタグを入れると解決します。

HTML

<meta name="viewport" content="width=device-width">

解決法は以上です。とても簡単でしたね。
ここから先は上記のメタタグの説明になります。

viewportとは

「viewport」というのは、ページを表示させる仮想の表示領域のことです。先ほどの、content="width=device-width"というのは、「表示領域の横幅を端末の横幅に合わせる」という意味になります。ページをスマホ対応させたいときは、はじめにこのメタタグを設定する必要があります。

viewportで指定できるもの

以下は<meta name="viewport" content="・・・" >の中で指定できるプロパティ(?)と値の表です。

指定できるもの 意味 初期値 指定範囲
width 横幅 980px 200px~10000px, device-width
height 高さ 横幅とのアスペスト比から計算される値 200px~10000px, device-width
initial-scale 初期のズーム倍率 1
minimum-scale 最小倍率 0.25 0~10
maximum-scale 最大倍率 1.6 0~10
user-scalable ズームの操作 yes yes, no

先ほどの設定はwidthのみでしたが、上記のプロパティを複数指定したいときは、<meta name="viewport" content="・・・" >content="・・・"の中にカンマ区切り「,」で指定していきます。

<meta name="viewport" content="width=device-width,initial-scale=1">

すべてを理解する必要はありませんが、今後、レスポンシブで不具合が起きたときはviewportの指定が原因でないかも疑ってみて下さい。

最近の記事

  1. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP