meta の viewport

Ajaxian で Wot no magnifying glass? - Ajaxian という記事があった。

HTML はそれなりにかじってるつもりだけど、以下のmetaタグが何を意味するのかが分からなかったので調べてみた。

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方 - iPhone Development Guidelines を読むによると以下の通り。

以下は viewport meta tag の属性です。すべてを設定する必要はありません。

• width：デフォルトの幅は 980、範囲は [200, 10,000]
• height：デフォルトの高さは、width と縦横比から計算され、範囲は [223, 10,000]
• initial-scale：ページが最初に読み込まれるときの拡大率で、デフォルトではページを画面に合わせる。範囲は [minimum-scale, maximum-scale]（ユーザが後から拡大率を変えられることに留意）
• user-scalable：ユーザが拡大を行えるかどうか。デフォルトは yes
• minimum-scale：拡大率の下限。デフォルトは 0.25 で、範囲は [>0, 10]
• maximum-scale：拡大率の上限。デフォルトは 1.6 で、範囲は [>0, 10]

要するに上のmetaタグは、「横幅を固定してズームを行わせない」という意味だったようだ。

これだけだと使い道が今ひとつだが、http://iphone.vjck.com/archives/2007/07/iphone-1.phpでは拡大する事で見やすくしている。

ここまで調べてiPhone用だったと気づいたのは内緒。