viewportでパソコン用のウェブサイトをiPad対応

iPadを回転させても画面にフィットさせる

PC用のウェブサイトをiPadでタテ表示にしたときも横表示にしたときも画面内に収める方法。
このメタタグでviewportのwidthを1024に固定するとちょうど良く調整できます。

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

initial-scaleで初期倍率を指定した状態だと、回転させた時スクロールが出たり、縮小し過ぎたりとハマったので
最初からinitial-scaleは省いておくのがポイント。

もちろん、元になるウェブサイトの幅が1024px以内に収まっているのが大前提です。

関連記事

Pocket