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