viewportとは
Last update 2017-03-23 20:28:12
iPhoneやスマートフォンでサイトを表示させると、文字や画像がすごく小さく表示されてしまいます。
これはiPhoneのブラウザが、横幅980pxとして擬似的に表示しているためです。
iPhone4やiPhone4Sなどは、Retinaディスプレイと呼ばれる超高解像度の液晶なんですけれど、それでも縦960 x 横640でしかありません。
おそらくパソコン用サイトのほとんどが、横幅980pxで表示させれば横スクロールなしに表示できることから来ているのかもしれませんが、3.5インチに980pxはちと小さすぎます。
Sponsored Link
横に倒せば、980pxのまま960pxの実際の画面に表示されるので、少しは見やすくなりますが、それでもまだ小さい。
実際のイメージはこんな感じ。
Retinaディスプレイなので、目を近づければ文字を読むことは出来るんですけれど、長文を読むのはつかれる。。。
HTMLは
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>実験</title></head>
<body>
<p>あああああ
いいいいい
<img src="http://iphone.f-tools.net/img/201010/20101031172155554m.jpg"
alt="スイカ" width="300"></p>
</body></html>サンプルはこちら。
タグを見てみると、シンプルで特におかしな点はなさそうな気がしますが、このままだとiPhoneやスマートフォンには小さく見えてしまうのです。
ちなみにパソコンで表示させるとこんな感じ。
パソコンではそれなりにフォントが大きく（設定にもよりますが14pxぐらい）表示されるので、見にくいということはありません。
そもそもパソコンのディズプレイは19～21インチぐらいあるので、もともと文字自体がそれなりに大きいためです。
viewportを使うと
これを見やすく表示させるには、METAタグでviewportを指定してやります。
title の上あたりに、以下の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="http://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)が有効にならない。という問題を抱えているようです。
これについては、すご～く複雑なので、別のページであらためて詳しく検証したいと思います。
最終更新日 2017-03-23 20:28:12
Sponsord Link
投稿日：2012-03-19
| 
| 
| 
