blog.鶯梭庵

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

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

この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。

その1から続く

では、viewport のデフォルト値を変えたいときはどうするのか。ここで meta タグの出番だ。HTML で <meta name="viewport" content="..."> と記述することで、viewport のさまざまな属性を設定できる。

前述のとおり、パソコン向けにデザインされたウェブページは、デフォルトで、つまり meta タグがなくても、モバイルデバイスでそれなりに表示される。しかし、コンテンツを表示する領域の幅を 800 ピクセルとか 1024 ピクセルとか特定の値にしている場合、モバイルデバイスでの表示が残念なことになる。

コンテンツ領域の幅が 1024 ピクセルに設定されているウェブページがあるとする。これを iPhone 上の Safari で表示すると、まず 980 ピクセル幅の viewport に合わせてレイアウトされるので、ページの右端 44 ピクセル分が viewport の外にはみ出てしまう。その状態で縮小されて画面に表示されるから、右端のコンテンツが画面の外にはみ出る。そのコンテンツを見るには、横にスクロールしなければならない。この場合、width=1024 として viewport の幅を 1024 ピクセルに広げてやれば、スケールは小さくなる(縮小率が大きくなる)が、横スクロールの必要がなくなる。

逆に、コンテンツ領域の幅が 800 ピクセルで固定されているウェブページでは、viewport に合わせてレイアウトされた時点で左右に合計 180 ピクセルの余白ができる。それを縮小するから、画面でもやはり余白がある。この場合、width=800 として viewport の幅を狭くすれば、余白がなくなると同時にスケールを大きくできる。

つまり、コンテンツ領域の幅が固定されているウェブページでは、以下のようにして viewport の幅を指定する。


<meta name="viewport" content="width=(コンテンツ領域の幅)">


注意点が2点ある。まず、幅の単位はピクセルだが、単位は書かない。width=1000px はまちがい。

次に、width をピクセル数で指定する場合、initial-scale は指定しない。width=1000,initial-scale=1 はまちがい。いや、まちがいではないけれど、意図した表示にはならないはずだ。

そもそも initial-scale とは何か。すでに述べたように、モバイルブラウザーは viewport 上にレイアウトしたウェブページを拡大縮小して画面に表示する。そのときのスケールの初期値、つまりスケールが設定されていないときに使用される値が initial-scale の値だ。

width をピクセル数で指定する場合、たいていはコンテンツ領域の幅を画面の幅に合わせたいと思っているだろう。viewport の幅をコンテンツ領域の幅と等しく設定していれば、必要なスケールの値は、画面の幅を viewport の幅で割ることで求められる。たとえばコンテンツ領域の幅が 1000 ピクセルで width=1000 と指定した場合、iPhone 7 なら画面の幅が 375 ピクセルだから、スケールが 0.375 のとき画面の幅に過不足なく表示される。ところが、iPhone 7 Plus なら、画面の幅が 414 ピクセルだから適切なスケールは 0.414 だ。指定するべき initial-scale の値は、デバイスごとに異なる。したがって、HTML で指定してはいけない。width だけ指定すれば、その値と画面の幅から、適切なスケールの値をブラウザーが計算してくれる。

では、width=1000,initial-scale=1 と指定したら、どう表示されるだろうか。ウェブページが幅 1000 ピクセルの viewport 上にレイアウトされて、等倍で画面に表示される。ということは、iPhone 7 であればページの左 375 ピクセルだけが見えていて、それより右のコンテンツを見るには横にスクロールしなければならない。これは意図した表示ではないだろう。

その3に続く。

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

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]

羽鳥 公士郎