スマホ最適化【 3 】 ビューポート(viewport)の設定

   2015/02/17   icon-clock-o読了時間:約4分30秒

スマホ最適化の第一歩、ビューポートの設定について。
viewportというmeta要素をhtmlファイルに記述して、
スマホやタブレットでサイトを閲覧した際の見え方や挙動を設定します。
横幅や縦幅の設定や、ズームを許可するか否か、などの様々な設定が可能です。

 目次 

viewport とは

viewport 属性を記述

viewport の設定項目
  ∟表示領域の幅(width)
  ∟表示領域の高さ(height)
  ∟初期のズーム倍率(initial-scale)
  ∟最小倍率(minimum-scal)
  ∟最大倍率(maximum-scale)
  ∟ズーム操作の許可(user-scalable)

viewport とは

viewport(表示領域)とは、ブラウザが持っている仮想ウィンドウサイズのこと。
機器ごとにこれが異なるために、表示される文字や画像の大きさも異なってきます。

Googleさんが 【 ビューポートを設定する 】のページで
設定方法を説明してくれているのですが、これがイマイチ分かりづらい。

このルールは、ページでビューポートを指定していないことや、さまざまな端末に適応しないビューポートを指定していることを PageSpeed Insights が検出した場合にトリガーされます。

元が英語の記事が割と雑に和訳されているせいでルー大柴さんみたいですね。
どうやら言いたいことは 『 ビューポートを設定してないか、間違った設定にしてるよ 』 ということのようです。
そこでルー語のGoogleヘルプに言われるがままビューポートを設定します。

viewport 属性を記述

Googleヘルプに書いてある基本のビューポートはこちら

表示領域の幅(width)はデバイス(端末)の幅(device-width)に合わせて、
初期のズーム倍率(initial-scale)は1倍、という設定ですね。
これをこのままhtmlファイルのmeta領域(<head>と</head>の間)に記述するのでも構わないと思います。

viewportについて細かく解説してくださっているサイトさんも色々あるのですが、
皆さん言ってることがちょっとずつ違うので私は混乱した挙句に
このように基本の幅指定だけを記述するという暴挙に出ています。

倍率もズームも見てるひとの自由にしてくれたらいいよ・・・という投げやりな設定ですが
自分のスマホで見てみたら別に操作上おかしなこともなく、
Googleさんのモバイル フレンドリー テストでもエラーにならなかったのでまあいいかと思っています。

でももしかしたら設定しておいたほうがいいのかもしれないのでそこらへんはあなたしだい。
設定したい方のために以下はviewport設定項目の解説を載せておきます。

viewport の設定項目

viewportの設定項目は ,(カンマ) で区切って追加します。
複数を設定した場合はこんな感じ。

表示領域の幅(width)

表示領域の高さ(height)

初期のズーム倍率(initial-scale)

最小倍率(minimum-scal)

最大倍率(maximum-scale)

ズーム操作の許可(user-scalable)

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket