幅または初期スケールのタグがない
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
viewport メタタグがないと、モバイル デバイスで一般的なパソコン画面の幅でページをレンダリングした後、縮小されて読みにくくなります。
ビューポート メタタグを設定すると、ビューポートの幅とスケーリングを制御して、すべてのデバイスで適切なサイズを設定できます。
Lighthouse では、ビューポート メタタグのないページにフラグが設定されます。
次のすべての条件が満たされない限り、ページは監査に不合格となります。
- ドキュメントの <head>
に <meta name="viewport">
タグが含まれている。
- ビューポート メタタグに content
属性が含まれている。
- content
属性の値にテキスト width=
が含まれている。
適切な Key-Value ペアを含むビューポートの <meta>
タグをページの <head>
に追加します。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
各 Key-Value ペアは次のように動作します。
- width=device-width
は、ビューポートの幅をデバイスの幅に設定します。
- initial-scale=1
は、ユーザーがページにアクセスしたときの初期ズームレベルを設定します。
1 未満の初期スケール
initial-scale
が 1 未満に設定されていると、ブラウザでダブルタップによるズーム機能が有効になります。この機能は通常、モバイル用に最適化されていない PC サイトで使用されます。これにより、ブラウザが 2 回目の「ダブル」タップが行われるかどうかを確認するまで、タップ操作に 300 ミリ秒の遅延が発生します。そのため、初期スケールが 1 未満に設定されている場合も監査は失敗します。
リソース
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2024-05-27 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2024-05-27 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2024-05-27 UTC。"],[],[]]