blog.鶯梭庵

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

改訂版・たぶん、ほとんどの人は 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">


と指定することが多い。だが、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に続く。

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

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]

羽鳥 公士郎