blog.鶯梭庵

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

改訂版・たぶん、ほとんどの人は 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 の指定が無視される。無視されるかどうかは、画面の幅に依存するから、ユーザーが使っているデバイスに依存する。そのため、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に続く

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

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]

羽鳥 公士郎