blog.鶯梭庵

二〇一七年 皐月 十一日 木曜日

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

その3から続く

以上をまとめると、コンテンツ領域の幅が固定されているウェブページでは width=(コンテンツ領域の幅) と指定する。initial-scale は指定しない。

これは、モバイル向けにデザインされたウェブページでも同じだ。たとえばコンテンツ領域の幅が 320 ピクセルで固定されている場合、width=320 とする。繰り返すが、initial-scale は指定しない。この場合、画面の幅が 320 ピクセルよりも広いデバイスでは、画面に合わせて表示が拡大される。

では、width=320,initial-scale=1 と指定したらどうなるだろうか。画面の幅が 320 ピクセルよりも大きい場合、すでに述べたように width の指定が無視されるから、これは実際のところ initial-scale=1 と指定していることになる。したがって、viewport の幅が画面の幅と同じになり、そこに幅 320 ピクセルのコンテンツをレイアウトするから、デバイスによっては左右に余白ができる。

もっとも、拡大されるより余白ができたほうがよいという考えもあるだろう。それでも width=320,initial-scale=1 はまちがい。拡大を避ける正しい方法は、initial-scale=1 と指定するのが1つ。または width=device-width とする。これは、文字通り、viewport の幅を画面の幅と同じにするという意味だ。

しかし、モバイル向けページでコンテンツ領域の幅を固定するというのは、いまどき流行らない。たとえば、デバイスを横向きに回転させれば幅が広くなるが、そのときに拡大されたり余白ができたりするのは格好悪い。少なくともモバイル向けのウェブページでは、画面の幅に合わせてレイアウトを動的に変化させたほうがよい。

その場合でも、viewport の幅を画面の幅と同じにすることになる。そのための指定は、先ほどと同様、width=device-width または initial-scale=1 だ。ところが、一般には、両者を合わせて


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


と指定することが多い。だが、widthinitial-scale の両方を指定するのは避けるべきではなかったか。どちらか片方だけにするべきではないのか。

width=device-width と指定した場合に、initial-scale を 1(あるいは 1.0)以外の値にするのは、確かに不適切だ。

まず、initial-scale の値が 1 より小さい場合、width の値と initial-scale の値との積は、常に画面の幅より小さくなる。ということは、width=device-width の指定は常に無視される。常に無視される指定をわざわざ書くのは無意味だ。

また、initial-scale の値が 1 より大きい場合、せっかく画面と同じ幅の viewport にレイアウトしたウェブページを拡大して表示することになるから、ページの右側が画面の外に出る。それを見るためには横にスクロールしなければならない。わざわざそんな表示にする理由はないはずだ。

しかし width=device-width,initial-scale=1 なら、同じ意味の指定を2度書いたまでで、とりわけて問題はない。同じことを繰り返すのは、冗長ではあるが、まちがいではない。古いバージョンの Safari では、デバイスを横向きにしたときに viewport が広がるのではなくスケールが大きくなり、拡大されて表示されるという問題があったが、それは3年前の話で、もう考慮しなくてもよいだろう。

なお、Windows Phone 版の IE は initial-scaleサポートしていないそうだ。そのため、強いてどちらか片方だけを指定するなら、width=device-width を指定したほうがよいだろう。

その5に続く。

さんのコメント:

・HTMLタグは使えません。

・電子メールアドレスを含めないでください。

・コメントには全角文字を含めて下さい。

・長さの上限はおよそ800字です。

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

羽鳥 公士郎