ウェブページを iPhone などの iOS デバイスで描画する際に関係してくる meta 要素の viewport 属性について考えてみる。この viewport 属性は、iPhone などウインドウという概念を持たないデバイスが仮想的なウインドウでウェブページを表示させる方法です。viewport 属性を持った meta 要素がない場合は、viewport 属性のデフォルト値が使われます。
参考: Safari HTML Reference: Supported Meta Tags
この属性値が自動的に付与されるので、980px 以下の 640px 固定幅ウェブページは相対値 340px (980px – 640px) の余白を持ったページとなります。しかし、980px 以上 1280px 以下の場合は設定する必要はありません。
詳しく掘り下げていくと、却って分かりにくくなるので結論から申しますと
と固定幅を指定するか、
個々のデバイス幅でよろしく、とするかです。
両方を試してみて JavaScript 動作などに問題がなければ、きれいに表示される “width=device-width” がオススメ!!