blog.鶯梭庵

二〇一七年 皐月 十八日 木曜日

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

その5から続く

まとめ。

まず、ウェブページの一部または全部でコンテンツの幅が固定されている場合(パソコン向けに 800px とか 1024px とか、あるいはモバイル向けに 320px とか)、2通りの指定がある。

幅が固定されているコンテンツが画面にぴったり収まるよう拡大または縮小して表示する場合、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-scalemaximum-scaleuser-scalable は指定しない。これらの指定はユーザビリティを損ねる。

initial-scale も原則として指定しないが、width=device-width と指定したときに限り、initial-scale=1 をあわせて指定してもよい(initial-scale=1.0 でもよい)。

[この記事にコメントを書く。] [このカテゴリをまとめて読む。] [最新の記事を読む。]

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]

羽鳥 公士郎