スマートフォン用ページが自動縮小されないようにする

スマートフォンを使って「PC向けに作られたウェブページ」を閲覧すると、たいてい全体が縮小されて表示されます。これはスマートフォン向けにページを作った場合でも同様で、コンテンツが多くなると自動的に縮小されて表示されます。

下図は、前記事「スマートフォンで押しやすいボタン型リンクを作るCSS」で紹介したサンプルページです。スマートフォンで表示させれば、左側のように見えるはずです。これは、HTML内に「自動縮小を防ぐ対策」を記述しているからです。もしそれがなければ、右側のように縮小されて表示されてしまいます。


この機能は、PC向けに作られたウェブサイトをうまく閲覧するためには便利です。スマートフォンの画面解像度はPC用よりも低いので、実寸サイズでPC向けページを表示すると、横スクロールがたくさん必要になったり、レイアウトが崩れたりする可能性があります。それを防ぐため、「表示領域の横幅がもっと広い場合」を想定して描画した後、実際の画面サイズに合うまで縮小して表示しています。

自動縮小を制御するmeta要素「viewport」

この自動縮小機能は、PC向けページの表示には便利でも、スマートフォン向けにデザインされたページの表示には困ります。せっかく低い解像度でもうまく閲覧できるようにレイアウトを工夫しているのに、それが無駄になってしまうわけですから。

そのために、「viewport」という「自動縮小を制御する方法」が用意されています。これを使うと、自動縮小を無効にしたり、（描画の仮想サイズを指定することで）縮小の度合いを指定したりできます。HTML中にmeta要素を使って1行を記述するだけなので、とても簡単です。

スマートフォン向けのウェブページを作る際には、このviewportの指定を必ず記述するようにしておくと良いでしょう。今回は、この自動縮小を制御するviewportの記述方法についてご紹介致します。

それでは、自動縮小を制御するための具体的な記述方法を見てみましょう。