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

   2018/07/23   icon-clock-o読了時間:約8分42秒

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

 目次 

viewport とは

viewport 属性を記述

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

viewport とは

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

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

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

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

viewport 属性を記述

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

コード
<meta name=viewport content=”width=device-width, initial-scale=1″>

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

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

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

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

viewport の設定項目

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

コード
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5,user-scalable=no”>
表示領域の幅(width)
<meta name=”viewport” content=”width=device-width”>
基本はデバイス(端末)の幅(device-width)に合わせるのが無難かなと思います。
そうすればユーザーが使っている端末に合わせて自動で画面表示してくれます。

他に幅を指定して合わせたい場合はピクセル数(200~10000)で指定も可能です。
例:一般的なスマホの幅 320px に合わせるなら width=320

<meta name=”viewport” content=”width=320″>
表示領域の高さ(height)

表示領域は元々自動調整するようになっていますが、
幅(width)と同じように高さを設定することもできます。
これもデバイスの高さに合わせる(device-height)か、
233~10000の範囲でピクセル数による指定が可能です。

<meta name=”viewport” content=”height=device-height”>
初期のズーム倍率(initial-scale)
<meta name=”viewport” content=”initial-scale=1″>
そもそも最初は自動で1倍になってるはずなので、ここで1を設定する意味ってあるのかなーと
私の疑問は尽きません。間違いなくそうなるように唱えておくおまじないのようなものなのでしょうか。

もちろん1倍にしなければならないというわけでもなく、
以下のminimum-scaleとmaximum-scaleの範囲内であれば任意の倍率に設定することができます。

最小倍率(minimum-scal)
<meta name=”viewport” content=”minimum-scale=0.75″>
ユーザーがぎゅっと画面を縮小したときに、間違えて小さくしすぎないようにしてあげようという優しさ(たぶん)。
0~10倍の範囲であれば任意の倍率に設定できます。
これを指定していないときの初期値は0.25倍。<
最大倍率(maximum-scale)
<meta name=”viewport” content=”maximum-scale=2″>
最小倍率とは逆に、みよーんと拡大したときや、うっかりダブルタップしたときに
勢い良く大きくなりすぎないようにしてあげる優しさ(たぶん)。
これも0~10倍の範囲で設定できます。
これを設定していないときの初期値は1.6倍。
最小倍率と最大倍率を合わせて指定することも、片方どちらかを指定することもできます。

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

ぎゅっとしたりみよーんとしたりの拡大縮小操作を許可するかどうか。
許可する(yes)・許可しない(no)の2択です。
基本的に自動で 許可する(yes)になっているので、何か理由があってズームをさせたくない場合にのみ

<meta name=”viewport” content=”user-scalable=no”>
と許可しない設定を記述することになります。

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

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