viewportとは

iPhoneやスマートフォンでサイトを表示させると、字や画像が小さくなってしまいますが、metaタグのviewportを指定してやると見やすくなります。

最終更新日:2017-03-23 20:28

iPhoneやスマートフォンでサイトを表示させると、文字や画像がすごく小さく表示されてしまいます。
これはiPhoneのブラウザが、横幅980pxとして擬似的に表示しているためです。
iPhone4やiPhone4Sなどは、Retinaディスプレイと呼ばれる超高解像度の液晶なんですけれど、それでも縦960 x 横640でしかありません。
おそらくパソコン用サイトのほとんどが、横幅980pxで表示させれば横スクロールなしに表示できることから来ているのかもしれませんが、3.5インチに980pxはちと小さすぎます。

横に倒せば、980pxのまま960pxの実際の画面に表示されるので、少しは見やすくなりますが、それでもまだ小さい。

実際のイメージはこんな感じ。
Retinaディスプレイなので、目を近づければ文字を読むことは出来るんですけれど、長文を読むのはつかれる。。。

HTMLは

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>実験</title></head>
<body>
<p>あああああ
いいいいい
<img src="//iphone.f-tools.net/img/201010/20101031172155554m.jpg"
alt="スイカ" width="300"></p>
</body></html>

サンプルはこちら。
タグを見てみると、シンプルで特におかしな点はなさそうな気がしますが、このままだとiPhoneやスマートフォンには小さく見えてしまうのです。

ちなみにパソコンで表示させるとこんな感じ。
パソコンではそれなりにフォントが大きく（設定にもよりますが14pxぐらい）表示されるので、見にくいということはありません。
そもそもパソコンのディズプレイは19～21インチぐらいあるので、もともと文字自体がそれなりに大きいためです。

viewportを使うと

これを見やすく表示させるには、METAタグでviewportを指定してやります。
title の上あたりに、以下の1行を付け足してやります。

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

全体を表示させると、

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width , minimum-scale=1
, maximum-scale=1">
<title>実験</title></head>
<body>
<p>あああああ
いいいいい
<img src="//iphone.f-tools.net/img/201010/20101031172155554m.jpg"
 alt="スイカ" width="300"></p>
</body></html>

結果

今度は、適切な大きさで表示されました。

viewport プロパティ
width 200～10,000px 幅で、○○pxで指定。
device-widthのような特別なプロパティもある。
height 200～10,000px 高さで、○○pxで指定。
device-heightのような特別なプロパティもある。
デフォルトは980px。
minimum-scale 0～10 倍率の最小値。数値で指定。
デフォルトは0.25
maximum-scale 0～10 倍率の最大値。数値で指定。
デフォルトは1.6

width

widthは、幅を指定します。基本的には
width:300px
のように数値と、pxで表現しますが、
width:device-width
と指定すると、そのデバイスの幅になるようです。
iPhoneだと、320pxですね。

ここを指定すると、iPhoneやアンドロイドのブラウザは、この値でブラウザの画面いっぱいに表示するようになります。
が、TABLEや画像、その他のタグでこの幅以上のものは、横スクロールで表示されます。

さらにここで指定した値で表示されると、スタイルシートで以下のように指定してやると・・・

@media screen and (max-device-width: 480px) {
  body {
    font-size: 120%;
  }
}

@media screen and (max-device-width: ○○px)
は、デバイスの表示領域の幅が○○px以下の場合のみ、{}で囲まれたスタイルシートを適用させる・・・という意味で、1つのHTMLファイルを動的なプログラムを必要とせず、パソコン用とスマートフォン用に表示することが可能になります。
これについては、また別の項で詳しく取り上げたいと思います。

minimum-scale

ピッチインなどで、ページを縮小するときの最小倍率です。
例えば0.5に指定すると、半分の大きさまで縮小されます。
1にすると、縮小して表示されなくなります。

maximum-scale

ピッチアウトなどで、ページを拡大するときの最大倍率です。
例えば2.0に指定すると、最大2倍まで拡大表示させることができます。
1にすると、拡大ができなくなります。

viewportの問題点

viewportと、@media screen and (max-device-width: ○○px)の2つを利用すると、当サイトのような静的なページ(htmlファイル)でも、訪問者がパソコンだった場合はパソコン用の表現に。
スマートフォンの場合はスマートフォン用の表現に(半ば強引ですが)することができます。
が、実際にはiPhoneの場合は大丈夫なんですけれど、アンドロイドの場合、そのページの前のページで拡大して表示していた場合に、@media screen and (max-device-width: ○○px)が有効にならない。という問題を抱えているようです。

これについては、すご～く複雑なので、別のページであらためて詳しく検証したいと思います。

Sponsored Link

関連ページ