Travellers Tales

viewport 属性の区切りはセミコロンじゃなくてカンマじゃない？

日本でも iPod touch/iPhone 用のウェブサービス・インターフェイスが続々出てきましたが、実際に使われている meta 属性の viewport プロパティの区切りが2種類存在することに気が付きました。カンマ（コンマ）を使っているところと、セミコロンを使っているところです。

カンマ区切りの viewport

<meta name="viewport" content="width=320, user-scalable=no /">

セミコロン区切りの viewport

<meta name="viewport" content="width=320; user-scalable=no; /">

Apple の開発資料¹²³⁴⁵に示される例は、すべてカンマ区切りとなっているので、カンマ区切りが望ましいと思われます。最初そのことに気がつかずに、セミコロン区切りで書いたものをコピー＆ペーストしていました。

すると user-scalable=yes にしているにも関わらず、拡大縮小ができなくなってしまいました。ちょっと悩んだ末に、区切り文字の違いに気がつき、カンマ区切りに修正したところ、きちんと拡大縮小できるようになりました。ちなみに user-scalable の設定は Safari on iPhone/iPod touch に対してだけでなく、デスクトップの Safari 3 にも影響があり、user-scalable=no で文字の拡大縮小ができなくなるようです。（訂正：デスクトップの Safari 3 で拡大縮小ができないのは、-webkit-text-size-adjust: none; という CSS のためでした。）

user-scalable=yes; で Safari for iPhone/iPod touch のピンチ動作が使えなくなる（追記）

上記で、カンマ区切りにしたときに、拡大縮小ができなくなったのは、user-scalable の後にあるセミコロンが原因ということがわかりました。viewport 属性の区切りはセミコロンでも一応動くようなのですが、

<meta name="viewport" content="width=640; user-scalable=yes; /">

と user-scalable の後にセミコロンを付けると、user-scalable の値が偽になるのか、拡大縮小ができなくなります。セミコロンを付けずに

<meta name="viewport" content="width=640; user-scalable=yes /">

とする分には、拡大縮小含め、一応正しく機能しているようです。しかし、Apple の開発ドキュメントに習えば、セミコロンではなくカンマを使った方が無難でしょう。

viewport 属性の区切りの例

カンマ区切りの viewport の例：

• Apple の開発ドキュメント
• Apple の iPhone 開発用サンプルコード[^TL-154_iPhoneDev4]
• iPod touch/iPhone 用 NHK ウィジェット⁶

セミコロン区切りの viewport の例：

• Google 検索⁷、カレンダー、リーダー⁸
• livedoor Readre lite⁹
• ナタリー touch!¹⁰
• みんなで作る話題発見サイト　トピックイットiPod対応β版：@nifty¹¹

実はこれらのサイトはことごとく iPod touch/iPhone 専用インターフェイスで、かつ、user-scalable=no にしているものが多いので、viewport の設定が壊れていても影響が出ていないのだと思います。