二〇一七年 皐月 十八日 木曜日
■ 改訂版・たぶん、ほとんどの人は 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 でもよい）。
カテゴリ
[/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]