グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

viewport の基本はわかっていても、条件によって必要な設定が変わってくるのでなんだかんだ躓いてしまいます。
後で見返せるように条件とその時の設定をメモしておこうと思います。

今回はこんな感じです。

・PC版のデザインをそのままスマートデバイスで表示する
・ページの横幅は980px以下
・ただし、横に余裕を持たせるために1000pxで表示させたい
・ズームは可能だが、ページ表示時は全体が見えるように


PC版を見せるだけなら基本 viewport の設定はいらないのですが、
決まった幅で見せたいので width を設定しないといけません。

上手くいった設定は以下。幅だけ設定します。


<meta name="viewport" content="width=1000">


「initial-scale=1」を設定すると初期表示時にズームされてしまうので注意です。