使い方を教えてください。

画面の入力欄に処理したい値を入れるだけで、viewport メタタグガイドが即座に結果を表示します。コピーボタンで結果をワンクリックでクリップボードに送れます。

料金はかかりますか？

viewport メタタグガイドは完全無料です。登録やログイン、課金、アプリのインストールは不要で、ブラウザがあればすぐに利用できます。

SEO・Web制作無料登録不要

viewport メタタグガイド

HTMLのviewportメタタグの設定方法とよくある問題を解説する無料オンラインツール。

入力

結果

--- 推奨設定 ---
<meta name="viewport" content="width=device-width, initial-scale=1">

--- プロパティ ---
width=device-width    デバイス幅に合わせる
initial-scale=1       初期ズーム1倍
maximum-scale=1       最大ズーム(非推奨:a11y問題)
user-scalable=no      ズーム禁止(非推奨:a11y問題)
viewport-fit=cover    ノッチ対応(iPhone)
interactive-widget=resizes-content  キーボード対応

--- やってはいけない ---
❌ user-scalable=no (ズーム無効化)
❌ maximum-scale=1 (ズーム制限)
→ 視覚障害者のアクセシビリティを妨げる

--- iPhone ノッチ対応 ---
<meta name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover">

body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

--- PWA対応 ---
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#3b82f6">

FAQ

よくある質問

運営維持のため一部ページに広告を表示していますが、ツール本体の動作を妨げない範囲に留めています。ブロッカーを利用されても機能は動作します。

こちらもおすすめ

標準viewport

標準viewportを行う無料オンラインツール。標準viewportをブラウザ上で即座に実行でき、SEOツールとして登録不要で利用できます。

meta authorタグ

meta authorタグを行う無料オンラインツール。meta authorタグをブラウザ上で即座に実行でき、SEOツールとして登録不要で利用できます。

UTF-8 charset

UTF-8 charsetを行う無料オンラインツール。UTF-8 charsetをブラウザ上で即座に実行でき、SEOツールとして登録不要で利用できます。

メタ説明文字数

メタ説明の文字数と推奨範囲(120-160)をチェックする無料オンラインツール。

A/Bテスト計算機

A/Bテストのサンプルサイズ算出と統計的有意性を判定。コンバージョン率の比較に便利な無料オンラインツール。

alt属性テンプレート

画像のalt属性テンプレートを生成する無料オンラインツール。

読み込み中...