blog.鶯梭庵

二〇一三年長月廿五日水曜日

■ たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる [/links]

この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。

この記事は古くなっています。改訂版があります。

ウェブサイトをスマートフォンに対応させるために <meta name="viewport" content="..."> と指定することは、多くの人が知っていると思う。しかし、content の中身を何にするべきか本当に理解している人は、日本ではごく少ないようだ（かくいう私もつい最近まで理解していなかったのだから、大きなことは言えない）。

試しに「meta viewport」を Google で検索すると、以下のページが上位に出てくる。

Quick Tip: Don't Forget the Viewport Meta Tag @ Webdesigntuts+

A tale of two viewports - part two @ QuirksMode

Configuring the Viewport @ Apple Developer

ところが、日本語ページに限って検索結果上位 20 件を見てみたところ、これら３つの英語のページで書かれていることを理解していると思われるページは１つもなかった。もっとも、英語圏でも viewport meta タグを不適切に使っている人は多いようで、Stop using the viewport meta tag (until you know how to use it) という記事も見つけた。

先に結論を書いておく。適切な設定は、ページ幅が固定されているウェブページの場合、viewport meta タグを書かないか、

<meta name="viewport" content="width=(幅をピクセル数で指定)">

とする。ページ幅が可変（リキッドレイアウトとか RWD とか）のウェブページの場合、

<meta name="viewport" content="initial-scale=1.0">

とする。たいていの場合は、この３つのいずれかで用が足りるはずだ。

以前よく見られた（いまでも見かける）設定は次の通り。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

これは最悪だ。user-scalale の設定はあったりなかったりするが、あってもなくても同じ。最小が 1 で最大が 1 なのだから、どちらにしてもズームはできない。この「ズームができない」ということが問題だ。コンテンツを見せるためのウェブサイトであれば、ユーザーにズームをさせないというのは、ユーザビリティを多いに損ねる。ウェブを見る人は目がいい人ばかりではない。

最近は次の設定を見かけることが多い。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これなら、ユーザーがズームできるし、最近のスマートフォンでは表示も適切だ。しかし、iOS 5 以前では、画面を横向きにするとページが拡大されるという問題があった。これは iOS のバグではなく、設定が不適切なのだ。

そもそも width で指定しているのは何の幅かといえば、viewport の幅だ。ブラウザは、ウェブページを表示する前に、ウェブページを viewport の大きさに合わせてレンダリングする。そしてレンダリングした結果を、デフォルトでは viewport の幅がブラウザウィンドウの幅に合うように、拡大したり縮小したりして表示する。その拡大縮小のスケールを指定するのが initial-scale だ。

実は、iOS の場合、縦向きでも横向きでも device-width は 320 ピクセルで変わらない。（Android では、縦向きと横向きで device-width が変わる。）縦向きで表示するときは、ブラウザウィンドウの幅が 320 ピクセルで viewport の幅も 320 ピクセルでスケールが 1 だから、何も問題がない。ところが端末が横向きになると、ブラウザウィンドウの幅が 480 ピクセルになるのに、viewport の幅は device-width すなわち 320 ピクセルのままだ。スケールも引き続き 1 だから、width と initial-scale の設定がお互いに矛盾することになる。iOS 5 以前では width が優先されてページが拡大されるが、iOS 6 以降では initial-scale が優先されて viewport の幅がブラウザウィンドウの幅と同じになる。

矛盾を避けるには、width と initial-scale のどちらか片方のみを指定すればよい。もう片方はブラウザが自動的に計算してくれる。そして、device-width の解釈が iOS と Android で違うので、width=device-width の設定は使わない方がよい。

2013年9月29日追記　ところが、ここに IE が登場すると、例によって困ったことになる。Windows Phone の IE は initial-scale をサポートしていない。Windows Phone に対応しようとすれば、width=device-width と initial-scale=1.0 の両方を指定しなければならない。ということは、Windows Phone をとるか iOS 5 以前をとるかの二者択一を迫られるわけだ。

現状、日本では Windows Phone のシェアは極めて低いので、日本国内のみを対象にするなら initial-scale のみがよいだろう。しかし、Microsoft が Nokia を買収するので、今後日本でも Windows Phone 端末が販売されるかもしれない。それに、新しい iOS が矛盾をうまく回避してくれるようになったのだから、将来を考えたら width と initial-scale の両方を指定するのがよいかもしれない。

もっとも、将来と言えば、おそらく viewport の幅は meta タグではなく CSS で指定するようになるだろう。構造と表現を分離するという HTML5 の基本理念から言えば、viewport の幅を HTML ファイルの中で指定するというのはおかしい。そう考えると、ほとんどの人がまちがえているわけではなく、まちがえたのは Safari の開発陣だということになるだろう。

hiroさんのコメント：
ちょうど設定をやっている際にこお記事を見て助かりました。
最初に参照したページが、まさに間違いの例でした。

確かに、viewportがhtmlの中に記載されるのは不自然ですよね。
どう見てもcssの範疇なのに。

羽鳥さんのコメント：
hiro さん、コメントありがとうございます。
この記事を書いたときには iOS5 のシェアがそれなりにあったのですが、今では iOS5 以前を使っている人はほとんどいないでしょうから、ページ幅可変の場合は width=device-width, initial-scale=1.0 の指定が適切だろうと思います。
W3C では CSS に @viewport ルールを加えようとしているようなのですが、仕様が 2011 年からドラフトのままです。「将来は CSS で」という私の予想ははずれるかもしれません。

metaさんのコメント：
このページをスマホで見ると横スクロールしないといけないので非常に読み辛い

羽鳥さんのコメント：
meta さん、コメントありがとうございます。
スマホ未対応の件、申し訳ありません。ソースを見ていただくと分かる通り、table タグを使った古式ゆかしいサイトになっております。スマホ対応の予定はあるのですが、本業が忙しくて手が回っておりません。

[このカテゴリをまとめて読む。] [最新の記事を読む。]

blog.鶯梭庵

二〇一三年 長月 廿五日 水曜日

■ たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる [/links]

カテゴリ

最新記事

二〇一三年長月廿五日水曜日