二〇一七年 皐月 十一日 木曜日
■
改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その4
[/links]
この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。
その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">
と指定することが多い。だが、width と initial-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に続く。
[このカテゴリをまとめて読む。]
[最新の記事を読む。]
|