blog.鶯梭庵

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

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

その2から続く

width をピクセル数で指定したときに initial-scale を指定するべきでない理由がもう1つある。

たとえば width=250,initial-scale=1 と指定してみよう。これまで述べてきた方式を適用すれば、幅 250 ピクセルの viewport に合わせてウェブページがレイアウトされて、それが等倍で表示されるから、デバイスの左 250 ピクセル分だけにウェブページが表示され、右端は空白になることになる。あるいは width=500,initial-scale=0.5 と指定した場合、幅 500 ピクセルの viewport に合わせてウェブページがレイアウトされて、それが 50% 縮小されて表示されるから、やはりデバイスの左 250 ピクセル分だけにウェブページが表示され、右端は空白になる、のだろうか。

実際には、そうならない。ただでさえ狭いモバイルデバイスの画面で、右端を空白にするというのはもったいない話だ。こういう場合、すなわち width の値と initial-scale の値との積が画面の幅より小さい場合、width の指定が無視される。無視されるかどうかは、画面の幅に依存するから、ユーザーが使っているデバイスに依存する。そのため、widthinitial-scale の両方を指定した場合、デバイスによって、意図した表示になるかもしれないし、ならないかもしれない。width=1000,initial-scale=1 という指定でも、タブレットを横向きに使っていれば、width が無視されるかもしれない。

一方、initial-scale を指定しなければ、ほとんどの場合に width の指定が有効になる。「ほとんどの場合に」と書いたのは、スケールにはデフォルトで最大値と最小値が設定されており、そのため指定できる width の値にもデバイスに依存した最大値と最小値ができるからだ。最大値より大きければ最大値を指定した場合と同じになるし、最小値より小さければ最小値を指定した場合と同じになる。ただし、よほど極端な指定をしなければ、範囲を外れることはない。width=100 とか width=2000 とか指定することはないだろう。

では、width の指定が無視された場合、あるいはそもそも width を指定せず initial-scale のみを指定した場合、viewport の幅はどうなるのだろうか。

このような場合、viewport の幅は画面の幅を initial-scale の値で割った値になる。たとえば initial-scale=1 なら、viewport の幅は画面の幅と同じになる。initial-scale=0.5 なら viewport の幅は画面の幅の2倍、initial-scale=2 なら viewport の幅は画面の幅の半分になる。いずれの場合でも、viewport を initial-scale の値で拡大縮小すれば、画面の幅にぴったり合う。

したがって、width=250,initial-scale=1 という指定は initial-scale=1 という指定と同等であり、viewport の幅はデバイスの画面の幅と同じ(iPhone 7 であれば 375 ピクセル)になる。同様に、width=500,initial-scale=0.5 という指定は initial-scale=0.5 という指定と同等であり、viewport の幅はデバイスの画面の幅の2倍(iPhone 7 であれば 750 ピクセル)になる。

その4に続く

さんのコメント:

・HTMLタグは使えません。

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

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

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

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

羽鳥 公士郎