blog.鶯梭庵

二〇一七年 皐月 十四日 日曜日

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

この記事は書かれてから1年以上経過しています。内容が古くなっている可能性があります。コメントの受付は終了しました。

その4から続く

これまで長々と説明してきたが、まとめの前に、他によく使われる(しかし通常は使うべきでない)指定について見ておきたい。

まず、minimum-scalemaximum-scaleuser-scalable について。これらは、ほとんどすべての場合、ユーザーがウェブページをズームできないようにするために指定する。が、すべてのウェブページはユーザーがズームできるべきだ。したがって、ほとんどすべての場合、これらの指定はするべきでない。

するべきでない指定をする人が多いものだから、Safari はバージョン 10.0 から maximum-scale=1user-scalable=no の指定を無視するようになった。繰り返す。ほとんどすべての場合、minimum-scalemaximum-scaleuser-scalable は指定しない。

比較的最近導入された属性に shrink-to-fit がある。Apple の説明によれば、width=device-width が指定してあるウェブページで、iPad で画面を2分割したときコンテンツが 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-widthinitial-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 と指定する。

その6に続く。

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

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]

羽鳥 公士郎