トップページ  > ウェブ制作チュートリアル  > ビューポートを適当に書き換えてみる
第23章 スマートフォンへの対応

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

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

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

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要素による指定はしないほうが良いかもしれません。

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

まとめ
  1. ビューポートの指定次第で、スマートフォンなどのデバイス上の表示が変化する
  2. ビューポートに関する値を適当に書き換えて、実際の動作を確認してみると良い
  3. 変なビューポート指定はしない。それなら各デバイスの初期設定に任せておくほうが良い
<前へ 目次へ 次へ>
▲ページ先頭へ
トップページ  > ウェブ制作チュートリアル  > ビューポートを適当に書き換えてみる
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ