once-campfire のスタイルシートを参考にして viewport contnt について学び直しました。
・ビューポートの概念 – CSS | MDN
・<meta name=”viewport”> – HTML | MDN
ビューポートという一般的な用語は、コンピューターグラフィックスにおいて現在表示されている領域を指します。…… あなたが見ている文書の表示領域そのものです。
実ビューポートとは、viewportタグを処理した後に得られるビューポートです。……実際のビューポートは、その content 属性で定義されたサイズです。
basecamp/once-campfire
以下、viewport から抜粋。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, interactive-widget=resizes-content">width=device-width
width プロパティはビューポートのサイズを制御します。望ましいのは、 100% のスケールで CSS ピクセルで画面の幅を指定する device-width に設定することです。
initial-scale=1
コンテンツを 100% ズームで表示する。
user-scalable=no
ユーザーがウェブページをズームできない。
iOS10 以降では既定で無視される。
interactive-widget=resizes-content
resizes-content: The viewport gets resized by the interactive widget.
Android 版 Chrome でのビューポートのサイズ変更動作の変更に備える | Blog | Chrome for Developers
11 月の Chrome 108 のリリースで、…… Android 版 Chrome の動作が iOS 版 Chrome と iOS 版 Safari と同等になります。
Android 端末を持っていないため未確認ですが、この設定は不要に思えます。
以上です。
▼この記事がいいね！と思ったらブックマークお願いします
