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 でもよい)。

さんのコメント:

・HTMLタグは使えません。

・電子メールアドレスを含めないでください。

・コメントには全角文字を含めて下さい。

・長さの上限はおよそ800字です。

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

羽鳥 公士郎