二〇一七年 皐月 十八日 木曜日
■ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その６ [/links]
この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。
その５から続く
まとめ。
まず、ウェブページの一部または全部でコンテンツの幅が固定されている場合（パソコン向けに 800px とか 1024px とか、あるいはモバイル向けに 320px とか）、２通りの指定がある。
幅が固定されているコンテンツが画面にぴったり収まるよう拡大または縮小して表示する場合、meta タグの記述は、例えばコンテンツの幅を 800 ピクセルとしたとき、
<meta name="viewport" content="width=800">
となる。この場合、ウェブページは幅 800 ピクセルの viewport 上にレイアウトされ、画面の幅が 800 ピクセルより広ければ拡大して、画面の幅が狭ければ縮小して表示される。拡大縮小の比率はデバイスに依存するから、HTML では指定しない。すなわち、initial-scale は指定しない。
一方、拡大縮小をせず等倍で表示する場合、次のように指定する。
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
ただし、initial-scale=1 がなくてもよい。この場合、画面の幅がコンテンツの幅より広ければ、左右に余白ができる。逆に画面の幅が狭ければ、収まらない部分が画面の右にはみ出る。それをユーザーが見るには、横スクロールする必要がある。
次に、コンテンツの幅を固定せず、画面の幅に合わせて変化させる場合（つまりレスポンシブな場合）、viewport の幅を画面の幅と同じにする。そのための指定は次の通り。
<meta name="viewport" content="width=device-width,initial-scale=1">
この場合でも、initial-scale=1 はなくてもよい。
いずれの場合でも、minimum-scale、maximum-scale、user-scalable は指定しない。これらの指定はユーザビリティを損ねる。
initial-scale も原則として指定しないが、width=device-width と指定したときに限り、initial-scale=1 をあわせて指定してもよい（initial-scale=1.0 でもよい）。
[この記事だけを読む。] [このカテゴリをまとめて読む。] [最新の記事を読む。]
二〇一七年 皐月 十四日 日曜日
■ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その５ [/links]
この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。
その４から続く
これまで長々と説明してきたが、まとめの前に、他によく使われる（しかし通常は使うべきでない）指定について見ておきたい。
まず、minimum-scale、maximum-scale、user-scalable について。これらは、ほとんどすべての場合、ユーザーがウェブページをズームできないようにするために指定する。が、すべてのウェブページはユーザーがズームできるべきだ。したがって、ほとんどすべての場合、これらの指定はするべきでない。
するべきでない指定をする人が多いものだから、Safari はバージョン 10.0 から maximum-scale=1 や user-scalable=no の指定を無視するようになった。繰り返す。ほとんどすべての場合、minimum-scale、maximum-scale、user-scalable は指定しない。
比較的最近導入された属性に shrink-to-fit がある。Apple の説明によれば、width=device-width が指定してあるウェブページで、iPad で画面を２分割したときコンテンツが viewport からはみ出した場合に、デフォルトではコンテンツが収まるように viewport が広くなり、縮小して画面に表示されるが、shrink-to-fit=no と指定すれば viewport の幅もスケールも変わらず、viewport からはみ出た部分は画面からもはみ出る。
しかし、width=device-width と指定するならば、viewport の幅がいくつになるかわからないのだから、viewport からはみ出る部分がないようにデザインするべきだ。viewport の幅が狭いときにコンテンツが viewport からはみ出すとしたら、そもそもウェブページの作りが悪い可能性が高い。もし shrink-to-fit=no と指定したくなったら、その前に width=device-width の指定が適切かどうか検討した方がよい。width=device-width と指定したウェブページが適切にデザインされていれば、viewport の幅が狭くなるとコンテンツ領域の幅もそれに応じて狭くなり、コンテンツがはみ出ることはないはずだ。
しかし、viewport が狭いときに、意図的にコンテンツを viewport の外にはみ出させることがあるかもしれない。その場合、viewport からはみ出た部分が画面からもはみ出るのが正しい挙動だ。それならどうして、Safari はコンテンツを画面に収めるように動作することがあるのだろうか。Safari の開発者によれば、それは多数の人が width=device-width や initial-scale=1 を正しく使用していないからだ。
コンテンツの一部または全部の幅がたとえば 800px で固定されており、画面の幅がそれより狭いとき、ほとんどの人はコンテンツを縮小して画面に収めたいと思うだろう。そのときの適切な viewport の設定は、既に述べたように width=800 だ。width=device-width（または initial-scale=1）とすると、画面の幅に収まらない部分が右にはみ出る。本当にそのような表示を意図しているなら、iPad の Split View モードでも右にはみ出させるために width=device-width,initial-scale=1,shrink-to-fit=no と指定する。
その６に続く。
[この記事だけを読む。] [このカテゴリをまとめて読む。] [最新の記事を読む。]
二〇一七年 皐月 十一日 木曜日
■ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その４ [/links]
この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。
その３から続く
以上をまとめると、コンテンツ領域の幅が固定されているウェブページでは 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 と指定するのが１つ。または width=device-width とする。これは、文字通り、viewport の幅を画面の幅と同じにするという意味だ。
しかし、モバイル向けページでコンテンツ領域の幅を固定するというのは、いまどき流行らない。たとえば、デバイスを横向きに回転させれば幅が広くなるが、そのときに拡大されたり余白ができたりするのは格好悪い。少なくともモバイル向けのウェブページでは、画面の幅に合わせてレイアウトを動的に変化させたほうがよい。
その場合でも、viewport の幅を画面の幅と同じにすることになる。そのための指定は、先ほどと同様、width=device-width または initial-scale=1 だ。ところが、一般には、両者を合わせて
<meta name="viewport" content="width=device-width,initial-scale=1">
と指定することが多い。だが、width と initial-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 なら、同じ意味の指定を２度書いたまでで、とりわけて問題はない。同じことを繰り返すのは、冗長ではあるが、まちがいではない。古いバージョンの Safari では、デバイスを横向きにしたときに viewport が広がるのではなくスケールが大きくなり、拡大されて表示されるという問題があったが、それは３年前の話で、もう考慮しなくてもよいだろう。
なお、Windows Phone 版の IE は initial-scale をサポートしていないそうだ。そのため、強いてどちらか片方だけを指定するなら、width=device-width を指定したほうがよいだろう。
その５に続く。
[この記事だけを読む。] [このカテゴリをまとめて読む。] [最新の記事を読む。]
二〇一七年 皐月 七日 日曜日
■ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その３ [/links]
この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。
その２から続く
width をピクセル数で指定したときに initial-scale を指定するべきでない理由がもう１つある。
たとえば 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 の幅は画面の幅の２倍、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 の幅はデバイスの画面の幅の２倍（iPhone 7 であれば 750 ピクセル）になる。
その４に続く
[この記事だけを読む。] [このカテゴリをまとめて読む。] [最新の記事を読む。]
二〇一七年 皐月 四日 木曜日
■ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その２ [/links]
この記事は書かれてから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=(コンテンツ領域の幅)">
注意点が２点ある。まず、幅の単位はピクセルだが、単位は書かない。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 ピクセルだけが見えていて、それより右のコンテンツを見るには横にスクロールしなければならない。これは意図した表示ではないだろう。
その３に続く。
カテゴリ
[/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)
最新記事
◇ パスワードについてのあなたの常識はもはや非常識かもしれない・その１ [/links]
◇ ニューラルネットワークとディープラーニングで翻訳はどうなる・その５ [/language]
◇ ニューラルネットワークとディープラーニングで翻訳はどうなる・その４ [/language]
◇ HTTPS 対応 [/links]
◇ ひらがな・カタカナ学習ウェブアプリ [/links]
◇ 日本語の「た」と英語の過去形 [/language]
◇ ORI-REVO で回転楕円体を折る・その２ [/origami]
◇ ORI-REVO で回転楕円体を折る・その１ [/origami]
◇ 折り紙建築 [/origami]
◇ 折鶴に松図小柄 [/origami]
◇ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その６ [/links]
◇ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その５ [/links]
◇ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その４ [/links]
◇ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その３ [/links]
◇ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その２ [/links]