これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ

5
months
28
配信元サイト
てっく煮ブログ

スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。

  • このエントリーをはてなブックマークに追加
  • いいね!
  • google+
  • evernote

COMMENT

初めてスマホページを作る時につまずくのが「viewport」の設定だと思います。

これは何かというとスマホでこのwebページをどのサイズで表示するか、拡大率は?と設定できます。

 

ちなみにこのサイトのviewportは

「<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>」

横幅はデバイスの幅、表示倍率は100%という記述です。

 

正直、普通のサイトはこのシンプルな記述だけで大丈夫です。
※CSSでwidth=640pxに最適化しています。