WebサイトをiPadに最適化させる1行

<meta name="viewport" content="width=1024" />

タイトルを「iPadに最適なViewportの値は"1024"」から「WebサイトをiPadに最適化させる1行」に変更しました。

上の1行をheadタグ内に追加するだけで簡単にサイトをiPadに最適化することが出来ます。

内容的には「iPadを横長に持ったときにページが正確に（pixel by pixelで）レンダリングされる」という意味で、Appleもそうしています^[1]。

例外としては、

<meta name="viewport" content="width=device-width" />

固定幅を持たないWebサイトでは上のように記述するのが有効で、iPhoneなら320px、iPadでは768pxの値が自動的に代入されます。
（480pxや1024pxでない点に注意。本体を横長に持っても数字は変わりません）

もし、WebサイトのViewportをデバイスの画面解像度に対して常に等倍にしたい（横向きに持っても／縦向きに持っても等倍で）とお考えなら、次のように記述します。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

これで、どの向きに持っても画面解像度を最大限に活かしきれます。つまり、iPadならViewportが"1024"か"768"に動的に変化し、常にPixel by Pixelの状態に。

ただ残念なことに、副作用としてページの拡大縮小が一切できなくなってしまうので、使う人によってはストレスを感じるようになるかもしれません。

解決策の「JavaScriptを使ってViweportを動的に書き換える方法」については、またの機会に。

1. 当サイトは横幅が768px以下なので、iPadを縦に持ったときにピクセル精度が得られるよう、viewportを768に設定しています。