二〇一七年 卯月 卅日 日曜日
■ 改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その１ [/links]
この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。
もう３年近く前になるが、「たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる」という記事を書いた。その内容に大きな間違いはないのだけれど、３年前と今とでは状況が変わっているし、あらためて読み返してみると我ながらわかりにくい記事だと思った。
一方、Google で「meta viewport」と検索して上位に出てくるページを見る限り、３年たってもまだ理解していない人が多いようだ。たとえば「もう逃げない。HTMLのviewportをちゃんと理解する」は、残念ながら理解が中途半端だ。そんなわけで、改訂版を書くことにした。
しかし、わかりやすく説明しようとすると、どうしても長くなる。長くなるので分割する。技術的なことはいいから結論だけ知りたいという人は、まとめだけ読んでもかまわない。
そもそもウェブページというのは、印刷物と違って、ユーザーの環境によって見た目が変わる。特に、ブラウザーのウィンドウの幅に大きく依存する。パソコンのブラウザーで、ウィンドウの幅が 1000 ピクセルなら、ウェブページの横幅が 1000 ピクセルになるようにブラウザーがレイアウトをする。
モバイルデバイスでは、たいていの場合、ブラウザーのウィンドウの幅はデバイスの画面の幅に等しい。それなら、モバイルデバイスのブラウザーは画面の幅に合わせてウェブページをレイアウトするかというと、そうではない。モバイルブラウザーは、viewport の幅に合わせてレイアウトする。では、viewport とは何か。
先ほど「ウィンドウの幅が 1000 ピクセル」と書いたが、この「ピクセル」は物理的な画素の数ではない。最近は高精細のモニターが増えたが、CSS で 1000px と指定してあるものを 1000 個の画素で表示するなら、従来のモニターでは大きく、高精細のモニターでは小さく表示されることになる。それでは困るので、高精細のモニターでは、1000px の長さを、たとえば 2000 個の画素を使って表示する。その場合、1px が 2 画素にあたることになる。
CSS で指定する「ピクセル」（px）は、センチメートルやインチと同じような長さの単位だと考えるとよい。このような「ピクセル」を「CSS ピクセル」と言ったりする。で、ウェブデザインの文脈では、モバイルデバイスの幅も CSS ピクセルで測らなければならない。
最近のモバイルデバイスは画素数が非常に大きくなっているが、CSS ピクセルで測った幅はそれほど大きくない。たとえば iPhone 7 で 375 ピクセル、iPhone 7 Plus だと 414 ピクセルだ。パソコン向けにデザインされたウェブページを幅 375 ピクセルでレイアウトするなら、見づらくなるに決まっている。そこで viewport が登場する。
viewport というのは、ユーザーには見えない仮想的なウィンドウであって、その横幅は、デフォルトではパソコンのブラウザーの一般的なウィンドウの幅と同じ程度（iPhone 版 Safari では 980 ピクセル）に設定されている。そのため、パソコン向けにデザインされたウェブページを viewport に合わせてレイアウトすると、十分適切なレイアウトになる。
この段階では、ウェブページは viewport の上にレイアウトされている。しかし、viewport はユーザーには見えないから、レイアウトしたウェブページを画面に表示しなければならない。そのとき、ブラウザーは、viewport 上のウェブページを拡大したり縮小したりして画面に表示する。その拡大縮小の比率を、この記事では「スケール」と呼ぶことにする。
スケールのデフォルト値は、viewport 上でレイアウトされたウェブページを縮小して画面の幅にぴったり収めるような値だ。iPhone 7 なら、幅 980 ピクセルのウェブページを縮小して幅 375 ピクセルの画面で表示することになるから、デフォルトのスケールは約 0.38 だ。その結果、全体的なレイアウトはパソコンのブラウザーで見た場合と同等になるが、文字や画像は、パソコンで見る場合と比べておよそ３分の１の大きさで表示される。
これでは文字が読めないと思ったユーザーは、ピンチアウトしたり要素をダブルタップしたりして表示を拡大できる。このとき、レイアウトは変わらない。なぜなら、viewport の幅が変わらないからだ。画面の表示を拡大しようと縮小しようと、viewport 上のウェブページは変わらない。ユーザーが操作しているのは、スケールの値だ。ユーザーが表示を拡大したとき、スケールが大きくなっている。viewport 上のウェブページの大きさが変わらなくても、スケールが大きくなると、画面上では大きく表示される。
その２に続く
カテゴリ
[/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]