★ビューポートを適当に書き換えてみる

ビューポートを適当に書き換えてみる

今回は、ビューポートでどのような指定をすると、スマートフォンでどのような表示になるのか試してみます。
それぞれどのように表示されるか確認して、ビューポートについての理解を深めましょう。

maximum-scale=2

maximum-scale=2を指定すると、2倍まで拡大できます。

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

user-scalable=no

user-scalable=noを指定すると、拡大縮小は一切できなくなります。

<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">

上記の画面はすべて、iPhone 4Sでの表示結果です。
機種の種類やバージョンによって若干動作が異なりますので、参考程度にしてください。

スマートフォン向けのスタイリングをしない場合

meta要素でビューポートを指定しましたが、デバイスで表示させる横幅や倍率は、これから作成していくスマートフォン向けのスタイリングとの兼ね合いで決めるべきものです。

仮に、パソコン向けスタイリングのままで制作を完了するならば、上記のようなmeta要素による指定はしないほうが良いかもしれません。

例えば、現時点のサンプルサイトのように中途半端に原寸表示にしてしまったり、ユーザーの操作を制限してしまうよりは、各デバイスの初期設定に任せておくほうが良いでしょう。