パソコンや携帯電話用のサイトをiPhone、Androidスマートフォンに対応させるタグ。
スマートフォンの画面サイズはパソコンと同様 JavaScript で取得できる。
<script> document.write("screen.width " + screen.width + "、" + "screen.height " + screen.height); </script>
横幅は screen.width、縦幅は screen.height。 iPhone 4S や iPod touch(第2世代)の Safari では screen.width = 320、screen.height = 480 と表示される。 ただ、横幅320ピクセルとなっているが、特に指定がなければページ自体は横幅 980 ピクセルとして表示される。 よって、横幅 320 ピクセルのページを作ってもページが小さく表示されてしまう。 同様に、width を特に指定していないフィーチャーフォン(ガラケー)向けサイトは、スマートフォンで見ると文字が小さく表示され見にくい場合がある。
また、screen.width の値はブラウザの種類によって異なる場合がある。 Android 端末も機種やブラウザによって値はまちまち。
スマートフォンの画面サイズに合わせてページを表示させる便利なタグがある。
<html> <head> <meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> </head>
この meta タグ(viewport)を HTML の <head> 内に書くだけで良い。 ただし、ページ内にある <div> などに width=800 など大きい横幅が指定してあると綺麗にフィットして表示されないので、基本的にページは width に数値を指定しないで作る。
width が必要な場合は、viewport を使って表示した画面の横幅に収まる小さい値にするか、%で指定するか、max-width などを利用して端末の画面の幅に合うようにする。 viewport の方で width を指定する方法もあるが、どうやってサイトを作るかは好みによる。
2017年現在、横幅の目安としては 320px が最低ラインで、400px 前後で表示される機種が増えつつある。
viewport における各属性の指定は以下のようになっている。
このタグ(要素)は iPhone/iPod touch だけでなく、Android スマホでも使える。 iOS 1.0 以降、Android 2.0 以降対応。 device-width、device-height は、iOS 1.1.1以降、Android 2.0 以降対応。 device-width、device-height を指定すると、自動的に端末の画面サイズに合わせてページが表示されるようになるので便利。
width や height など各属性はカンマで区切って書く。 属性を指定しない場合はデフォルト値になる。 user-scalable=yes だと、画面をピンチアウト・ピンチインしてズームイン・ズームアウトできる。
私のサイトは以下のタグ(meta要素)を追加した。
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
この場合、画面の向きを縦から横に変えるとページの表示がフィットしない場合がある。 maximum-scale=1.0,user-scalable=no にしてこれを回避できるが、表示の大きさは変えられなくなる。
また、initial-scale=1.0 の代わりに maximum-scale=1.0 にするとピンチアウトでページを拡大できなくなるが、ブラウザによっては拡大できる。 2017年2月現在、Safari は拡大可能で、Chrome は拡大不可になる。
viewport については以下のサイトに詳しく書かれている。
Supported Meta Tags(Apple)
Configuring the Viewport(Apple)
Supporting Different Screens in Web Apps(Android Developers)
viewport を指定してスマホの画面を縦から横向きに変えた場合、iPhone(iOS)の Safari では文字が拡大されてしまう。 文字が拡大されないようにするには body 要素などに CSS で -webkit-text-size-adjust:100% 等を指定しておく。
body { -webkit-text-size-adjust: 100%; }
viewport さえ追加すればスマホに対応できるというわけではない。 まず、上述の通り width に気をつけてサイトを作る必要がある。 さらに、昨今流行りのレスポンシブデザインにするには viewport だけでは足りない。
「メディアクエリを使ったCSSの記述」と「画像のレスポンシブ化」を行うとかなりスマホで見やすくなる。 それらについては話が長くなるので レスポンシブデザインの仕組みと作り方、メディアクエリの書き方 と スマホの画面サイズに合わせて画像・写真を縮小・拡大表示するレスポンシブデザイン に書いた。