56 行
4.3 KiB
HTML
56 行
4.3 KiB
HTML
<title>META要素のviewportは必要とは限らない - 美々蝶々</title>
|
|
|
|
<h1>META要素のviewportは必要とは限らない</h1>
|
|
|
|
<ul>
|
|
<li>2023-08-26 (陰暦08月11日) たかし</li>
|
|
</ul>
|
|
|
|
<h2>序</h2>
|
|
|
|
<ul>
|
|
<li>美々蝶々は viewport 未指定だが、BIBIS では UI を保證したいから viewport 指定がある。</li>
|
|
<li>先に讀む事を推奬:<a href="https://hozon.site/archive/1693010815/developer.mozilla.org/ja/docs/Web/HTML/Viewport_meta_tag">ビューポートのメタタグ - HTML: ハイパーテキストマークアップ言語 | MDN (hozon.site)</a></li>
|
|
</ul>
|
|
|
|
<p>META 要素の viewport 指定は「レスポンシブデザイン」では定石ですが必須ではありません。指定するべきと感じる場面、それ以外の場面は次の通りです。</p>
|
|
|
|
<dl>
|
|
<dt>指定するべき場面:</dt>
|
|
<dd>制作者の想定のレイアウトを保證したい (複數カラムあり・フォームありなど)</dd>
|
|
<dt>指定しなくてもよい場面:</dt>
|
|
<dd>文章が傳はればよい時 (記事など)</dd>
|
|
</dl>
|
|
|
|
<p>ここからは「指定しなくてもよい」理由だけを説明します。「viewport を指定するべき」理由はウェブ上にたくさんあり、説明するまでもないからです。</p>
|
|
|
|
<h2>1. 文字サイズの自動調整</h2>
|
|
|
|
<p>多くのモバイル向けブラウザーには、文字サイズを大きくする機能など、viewport が未指定でも支障なく閲覽できる機能があります。</p>
|
|
|
|
<p>一般的に、META 要素の viewport が未指定なら PC ブラウザーと同じ横幅で計算され、モバイル端末の横幅に合せて縮小されます。つまり文字がとても小さくなります。問題はそれだけです。</p>
|
|
|
|
<p>當サイトは viewport 未指定ですが、例へば Android 向けの Privacy Browser では「Wide Viewport」の設定をオフにすれば、viewport 指定ありと同じ表示になります。Chrome や Firefox は文字サイズを自動調節できます。</p>
|
|
|
|
<p>もちろん、2カラム以上のサイトでは、モバイル版のレイアウトを提供する時は viewport を指定しないと表示内容が想定外になりますが、簡單なレイアウトのサイトなら問題はありません。</p>
|
|
|
|
<p><strong>サイトの作りが簡單なら、ブラウザーはサイトを柔軟に解釋でき、様々な補助機能を活用できます。</strong></p>
|
|
|
|
<h2>2. 見た目をHTMLに書く事になる</h2>
|
|
|
|
<p>本來 HTML に文書の内容を書き、CSS に文書の見た目を書く物ですが、viewport は正に見た目の話でありながら HTML に書かれます。</p>
|
|
|
|
<p>文字色などの體裁と異なり、viewport は後から變更される事は殆ど無く、どのサイトでも指定内容は同樣ですから、HTML から分離する利點は無く、實際的には DOCTYPE 宣言などと同じかもしれません。それでも明かに HTML の原則から外れた例外です。</p>
|
|
|
|
<p>CSS 内で viewport を指定できないから、HTML 内で指定するしか無いのは分ります。ならば MDN などの解説サイトでは、<strong>viewport は HTML の原則の例外である</strong>事を注意した上で解説するべきです。</p>
|
|
|
|
<h2>3. モバイル以外にも注意を向けよう</h2>
|
|
|
|
<p>これは viewport の話ではありませんが「レスポンシブデザイン」への意見です。</p>
|
|
|
|
<p>ウェブではモバイルに沢山の注意が向けられます。これは現實世界と同じで、モバイル端末は利用者が多く需要も高いからです。それでも注意するべき物は他にもあります。</p>
|
|
|
|
<p>餘り注意されませんが、印刷も大切です。印刷機能では PDF 形式で出力する事もできます。1度は適當なサイトを印刷してみて、どの樣な結果になるか確認する良いです。印刷した時の見た目も、モバイル版と同じく CSS の @media で記述できます。</p>
|
|
|
|
<p>昔のブラウザーやマイナーなブラウザーで支障が無い事も大切です。サイトの作りを簡單にして、互換性に懸念のある技術を避けるだけです。專用の對策より汎用的な對策の方が樂にできて良い效果を生みます。</p>
|