blog.鶯梭庵

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

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

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


ウェブサイトをスマートフォンに対応させるために <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 件を見てみたところ、これら3つの英語のページで書かれていることを理解していると思われるページは1つもなかった。もっとも、英語圏でも 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">


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


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


<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 だから、widthinitial-scale の設定がお互いに矛盾することになる。iOS 5 以前では width が優先されてページが拡大されるが、iOS 6 以降では initial-scale が優先されて viewport の幅がブラウザウィンドウの幅と同じになる。

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


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

現状、日本では Windows Phone のシェアは極めて低いので、日本国内のみを対象にするなら initial-scale のみがよいだろう。しかし、Microsoft が Nokia を買収するので、今後日本でも Windows Phone 端末が販売されるかもしれない。それに、新しい iOS が矛盾をうまく回避してくれるようになったのだから、将来を考えたら widthinitial-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 タグを使った古式ゆかしいサイトになっております。スマホ対応の予定はあるのですが、本業が忙しくて手が回っておりません。

[この記事にコメントを書く。] [このカテゴリをまとめて読む。] [最新の記事を読む。]

RSS feed

カテゴリ

[/language] (98)
[/links] (254)
[/mac] (114)
[/music] (36)
[/origami] (406)
[/this_blog/ajax] (7)
[/this_blog/blosxom] (4)
[/this_blog/history] (12)
[/this_blog/perl] (9)

最新記事

パスワードについてのあなたの常識はもはや非常識かもしれない・その1 [/links]
ニューラルネットワークとディープラーニングで翻訳はどうなる・その5 [/language]
ニューラルネットワークとディープラーニングで翻訳はどうなる・その4 [/language]
HTTPS 対応 [/links]
ひらがな・カタカナ学習ウェブアプリ [/links]
日本語の「た」と英語の過去形 [/language]
ORI-REVO で回転楕円体を折る・その2 [/origami]
ORI-REVO で回転楕円体を折る・その1 [/origami]
折り紙建築 [/origami]
折鶴に松図小柄 [/origami]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その6 [/links]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その5 [/links]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その4 [/links]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その3 [/links]
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その2 [/links]

羽鳥 公士郎