レスポンシブ対応のviewportメタタグ生成ツール

viewport幅を目的に合わせて選択します

viewport宣言は、ページのレイアウトviewportと画面の関係をモバイルブラウザーへ伝えます。多くのレスポンシブサイトでは、device-widthが適切です。デバイスのCSSピクセル幅に追従し、利用可能な領域に応じてメディアクエリを動作させられるためです。この生成ツールでは、固定され管理されたviewportが本当に必要な場合に限り、正の数値幅も指定できます。たとえば、旧式の埋め込み画面、再現可能なブラウザーフィクスチャ、互換性テストなどに利用できます。数値にはpxを付けずに入力してください。375は有効ですが、375pxはこの宣言の幅として無効です。ゼロ、負数、空欄、有限でない値、任意の単語は、もっともらしいだけのマークアップへ混入させず、明確に拒否します。返される幅は正規化されるため、375という数値テキストは安定したwidth=375になります。この限定的な検証により、自動処理でも出力を信頼できます。成功時の幅は、正確な標準キーワードまたは正の数値のどちらかであり、隠れたスペル補正やブラウザー依存の推測は行われません。

初期倍率を設定してタグをコピーします

初期倍率は、ページを最初に読み込んだ時点のズーム倍率を制御します。一般的には1を使用します。利用者がズームする前に、1つのCSSピクセルをviewport上の1つのCSSピクセルへ対応させる設定です。既定値は1ですが、特定のテストやアプリケーション要件がある場合は、別の正の有限数も指定できます。生成ツールはこの設定を幅とは別に検証し、数値としての意味を安定したテキスト形式で保持します。その後、<meta name="viewport" content="width=device-width, initial-scale=1">のような完全なタグを生成します。ブラウザーごとに相互作用が変わり得る複数のviewport宣言を追加せず、ドキュメントのhead内に原則として1回だけ配置してください。応答にはcontent文字列と、正規化されたwidthおよびinitial_scaleも含まれます。HTMLへ書き込む場合はmeta_tag、content属性だけを求めるフレームワークではcontent、テストで設定を検証する場合は個別フィールドを利用できます。ネットワーク要求、ページ検査、user agent判定は結果に影響せず、同一入力はブラウザーでもAPIでも常に同じ出力になります。

自動追加されない設定を確認します

この機能が意図的に生成するのはwidthとinitial-scaleだけです。maximum-scale、minimum-scale、user-scalable、viewport-fit、interactive-widgetなどの任意ディレクティブは追加しません。これらは自動的な既定値ではなく、製品設計とアクセシビリティを考慮して決める必要があるためです。特にズームの制限は、拡大を必要とする方にとってコンテンツを使いにくくする可能性があり、小さな生成ツールが無断で導入すべき動作ではありません。また、既存ページの監査、重複タグの検出、レスポンシブブレークポイントの試験、CSS自体がレスポンシブであることの証明も行いません。指定された2つの設定から決定論的なマークアップを作成します。結果を追加した後は、狭い画面と広い画面でページを確認し、文字が読みやすいこと、操作部品がはみ出さないことを確かめ、実際のブラウザーでズームを試してください。テンプレートを使うプロジェクトでは、全ルートへ同じ方針を適用できるよう、共有headコンポーネントに宣言を置きます。このページの対話操作はブラウザー内で無料です。自動API要求は$0.002です。同じ純粋なソルバーが両方を処理するため、手動で確認したタグを形式や検証規則を変えずにビルドスクリプトへ移せます。