暫定日本語訳：Viewport Meta Tag
暫定日本語訳：何 viewport meta tag does, なぜ it 作る responsive design 機能 on mobile, 正しい configuration, attribute reference, と 一般的な mistakes.
言語
暫定日本語訳：viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints へ ブラウザー へ size layout viewport へ device's width in CSS pixels instead of legacy ~980px fallback some mobile ブラウザー 使用. なしで it, phones できる render ページ at その wider fallback と shrink it, producing tiny text, horizontal scroll, と responsive breakpoints その 可能性がある ない apply as intended. It's ない ランキング factor itself, ただし its presence is one of things Google documents as indicating mobile-friendliness, と its absence is classic mobile usability failure. 決して force ユーザー-scalable=no または restrictive maximum-scale — it fails W3C's accessibility conformance rule 向けに zoom と できる lock out low-vision ユーザー, though ブラウザー できる override it (iOS 10+ ignores it by デフォルト). テスト it とともに Lighthouse または PageSpeed Insights: 検索 Console's Mobile Usability レポート と Mobile-Friendly テスト were retired December 1, 2023.
Evidence for this claim The viewport meta tag lets authors control viewport width and scaling so responsive layouts render at device width. Scope: Browser viewport behavior. Confidence: high · Verified: MDN: Viewport meta tag Evidence for this claim Pages should not disable browser zoom because users must be able to enlarge content for accessibility. Scope: WCAG resize-text requirement and viewport guidance. Confidence: high · Verified: W3C WAI: Understanding Resize Text暫定日本語案: TL;DR — viewport meta tag is one line in あなた ページ’s
<head>その tells 暫定日本語案: phones と tablets へ render あなた ページ at screen’s real width instead of 暫定日本語案: pretending it’s desktop 監視. なしで it, あなた ページ 表示 up tiny と あなた 暫定日本語案: have へ pinch と scroll sideways へ read it. line あなた want is 暫定日本語案:<meta name="viewport" content="width=device-width, initial-scale=1">.
何 viewport meta tag is
暫定日本語案: いつ smartphones 最初 got web ブラウザー, 大半の Webサイト were built 向けに desktop 暫定日本語案: screens. So many phone ブラウザー cheated: なしで viewport tag, それら’d fall back 暫定日本語案: へ fixed ~980 pixel wide layout — desktop-ish — lay ページ out at その 暫定日本語案: width, then shrink whole thing down へ fit phone. result was 暫定日本語案: readable-shaped ページ その was way too small へ actually read, とともに text あなた had 暫定日本語案: へ pinch-zoom と コンテンツ その spilled off sides.
暫定日本語案: viewport meta tag turns その off. It’s single line あなた put in
暫定日本語案: <head> of あなた ページ:
<meta name="viewport" content="width=device-width, initial-scale=1">暫定日本語案: width=device-width tells ブラウザー “lay this page out at this device’s screen
width, measured in CSS pixels” (ない necessarily 同じ as its raw hardware-pixel
暫定日本語案: count on high-density screen), と initial-scale=1 says “and don’t zoom in or
out when the page first loads.” その’s it. Copy その line, paste it near top of
暫定日本語案: あなた <head>, done.
なぜ it matters
暫定日本語案: Two 理由:
- 暫定日本語案: It 作る あなた ページ readable on phone. とともに tag, text is legible なしで 暫定日本語案: zooming と コンテンツ fits screen. なしで it, あなた get shrunk-down, 暫定日本語案: tiny-text, horizontal-scroll experience.
- 暫定日本語案: It’s 何 作る “responsive design” actually 機能. If あなた サイト 使用 modern 暫定日本語案: responsive CSS (layouts その adapt へ screen size), それらの rules are meant へ kick 暫定日本語案: in based on ブラウザー’s actual screen width. viewport tag is 何 tells it 暫定日本語案: その width. なしで it, あなた responsive breakpoints 可能性がある ない apply way あなた 暫定日本語案: designed them 向けに mobile.
暫定日本語案: 大半の modern themes と サイト builders 追加 この tag 向けに あなた 自動. ただし older 暫定日本語案: templates, hand-built ページ, と some ページ builders miss it — which is なぜ “viewport not set” still 表示 up in audits.
mistake へ 避ける
暫定日本語案: あなた might see version of この tag とともに user-scalable=no on end — その’s
暫定日本語案: someone trying へ stop 訪問者 から zooming so それら できる’t “break” layout.
暫定日本語案: Don’t do その. It stops 人々 とともに low vision から zooming in へ read あなた
暫定日本語案: ページ, と modern iPhones ignore 設定 anyway, so it does nothing except hurt
暫定日本語案: accessibility. Leave zoom alone.
どのように この fits rest of mobile SEO
暫定日本語案: viewport tag is one small piece of bigger mobile picture — it’s について どのように 暫定日本語案: あなた ページ renders on phone, which is 異なる から mobile-最初 インデックス登録 (について 暫定日本語案: which version of あなた ページ Google reads). If あなた’re doing full mobile pass, 暫定日本語案: mobile SEO hub, mobile SEO 確認, と mobile-最初 インデックス登録 cover rest.
暫定日本語案: Want exact attribute reference, accessibility details, と どのように へ テスト 暫定日本語案: tag 現在 その Google’s 古い Mobile-Friendly テスト is gone? Switch へ Advanced 暫定日本語案: tab.
Evidence for this claim The viewport meta tag lets authors control viewport width and scaling so responsive layouts render at device width. Scope: Browser viewport behavior. Confidence: high · Verified: MDN: Viewport meta tag Evidence for this claim Pages should not disable browser zoom because users must be able to enlarge content for accessibility. Scope: WCAG resize-text requirement and viewport guidance. Confidence: high · Verified: W3C WAI: Understanding Resize Text暫定日本語案: TL;DR — viewport meta tag — 暫定日本語案:
<meta name="viewport" content="width=device-width, initial-scale=1">— hints 暫定日本語案: ブラウザー へ size layout viewport へ device’s width in CSS pixels 暫定日本語案: instead of legacy ~980px fallback some mobile ブラウザー 使用, which is 何 lets 暫定日本語案: responsive CSS media クエリ evaluate against device’s real width on mobile. 暫定日本語案: 不足している または misconfigured, it’s classic mobile usability failure (tiny text, 暫定日本語案: horizontal scroll). It is ない ランキング factor — Google documents its 暫定日本語案: presence as one thing its mobile-friendliness evaluation checks 向けに, と no 暫定日本語案: more than その. 決して forceuser-scalable=no/ restrictivemaximum-scale: it 暫定日本語案: fails W3C’s ACT accessibility rule 向けに zoom, though ブラウザー overrides exist 暫定日本語案: (iOS 10+ ignores it by デフォルト). Google と Bing recommend identical tag. 暫定日本語案: テスト とともに Lighthouse / PageSpeed Insights — 検索 Console’s Mobile Usability 暫定日本語案: レポート と Mobile-Friendly テスト were retired December 1, 2023.
問題 it solves: ~980px virtual viewport
暫定日本語案: へ understand tag あなた have へ understand 何 it’s overriding. いつ mobile 暫定日本語案: ブラウザー were 新しい, lack of viewport tag meant some of them する fall 暫定日本語案: back へ fixed layout width of roughly 980px と render at その size — 暫定日本語案: deliberate accommodation so desktop-sized, pre-responsive サイト wouldn’t 暫定日本語案: completely break on early smartphones. ブラウザー then scaled result down へ 暫定日本語案: physical screen. MDN’s own framing: “If the site isn’t designed to work well on small viewports and this tag is omitted, some mobile browsers render the site using a fixed initial containing block width, typically 980px.” — it’s 暫定日本語案: ブラウザー-specific fallback, ない universal spec constant.
暫定日本語案: consequence, in Google’s own words: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read.” あなた get unreadable text, forced 暫定日本語案: pinch-zooming, と horizontal scrolling — textbook symptoms of ページ flagged “not mobile-friendly.”
暫定日本語案: 設定 tag “lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.”
Layout viewport vs. visual viewport (下で hood)
暫定日本語案: Two “viewports” are in play, と it’s worth 保持 them straight:
- 暫定日本語案: layout viewport is area ページ lays out へ と その fixed-position
暫定日本語案: elements attach へ.
width=device-widthsets この へ device’s screen width in 暫定日本語案: CSS pixels. - 暫定日本語案: visual viewport is 何 ユーザー is currently looking at — which changes 暫定日本語案: いつ それら pinch-zoom. Zooming changes visual viewport なしで changing 暫定日本語案: layout viewport.
暫定日本語案: 理由 この matters 向けに SEO と CSS: あなた responsive media クエリ
暫定日本語案: (@media (max-width: 600px) と friends) are evaluated against layout
暫定日本語案: viewport. If layout viewport is stuck at legacy ~980px fallback because
暫定日本語案: there’s no viewport tag, phone 可能性がある match あなた desktop breakpoints instead of
暫定日本語案: あなた narrow ones. MDN puts it plainly: “Without it, your responsive design with
breakpoints and media queries may not work as intended on mobile browsers.”
暫定日本語案: tag is 何 作る device-width layout viewport so あなた intended breakpoints
暫定日本語案: evaluate correctly.
正しい tag, と どこ it goes
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ...the rest of your head... -->
</head>暫定日本語案: Put it high in <head>, near charset, 前に コンテンツ-dependent tags. この is
暫定日本語案: value Google, Bing, と Lighthouse all recommend — verbatim, it’s fix
暫定日本語案: Lighthouse itself suggests. Don’t overthink value: width=device-width, 暫定日本語案: initial-scale=1 is answer 向けに essentially すべての responsive サイト.
Attribute reference
暫定日本語案: content attribute is comma-separated list of directives. MDN is
暫定日本語案: canonical attribute-by-attribute reference; here’s 何 各 one does:
| Directive | 何 it does | Notes |
|---|---|---|
width | Controls (minimum) pixel width of viewport | whole number 1–10000, または special value device-width ( screen width in CSS pixels). 使用 device-width. |
initial-scale | zoom ratio 間に device width と viewport on load | number 0.0–10.0. 使用 1. |
minimum-scale | minimum zoom level 許可 | 必要がある be ≤ maximum-scale. iOS 10+ ignores it by デフォルト. |
maximum-scale | maximum zoom-in 許可 | 必要がある be ≥ minimum-scale. iOS 10+ ignores it by デフォルト. Don’t restrict it. |
user-scalable | Whether ユーザー できる zoom (yes/no, デフォルト yes) | iOS 10+ ignores it by デフォルト. 設定 no is accessibility anti-pattern — leave it. |
interactive-widget | どのように interactive UI (e.g. virtual keyboards) affect viewport | Values: resizes-visual (デフォルト), resizes-content, overlays-content. Newer; 大半の SEO コンテンツ omits it. |
viewport-fit | どのように viewport handles display cutouts (notches) | Values: auto (デフォルト), contain (fits inside largest rectangle その avoids cutout), cover (fills display — pair とともに CSS env() safe-area-inset variables so コンテンツ doesn’t land 下で cutout). |
暫定日本語案: viewport-fit と interactive-widget are both ブラウザー-layout edge ケース —
暫定日本語案: display-cutout と virtual-keyboard handling, respectively — ない SEO directives;
暫定日本語案: 大半の SEO-focused guides skip them entirely.
暫定日本語案: small ただし real gotcha から Lighthouse’s own docs: 設定 initial-scale below
暫定日本語案: 1 できる trigger legacy double-tap-へ-zoom behavior その adds interaction delay —
暫定日本語案: another 理由 へ stick とともに initial-scale=1 rather than getting clever.
決して disable zoom: user-scalable=no is anti-pattern
暫定日本語案: あなた’ll still find user-scalable=no (または maximum-scale=1) copy-pasted へ 古い
暫定日本語案: theme boilerplate, usually から developer who didn’t want pinch-zoom “messing up”
暫定日本語案: their layout. It’s 誤った on two counts:
- 暫定日本語案: It fails web’s own accessibility conformance テスト 向けに zoom, と it 機能
暫定日本語案: against WCAG’s intent. W3C’s ACT rule “Meta viewport allows for zoom”
暫定日本語案: (rule b4f0c3) applies へ any viewport tag その sets
user-scalableまたは 暫定日本語案:maximum-scale, と its expectation is explicit: tag 必要がある ない 設定 暫定日本語案:user-scalable=no, とmaximum-scale必要がある ない be 設定 below2. ( rule 暫定日本語案: carries stated assumptions — it doesn’t apply if ページ has no visible 暫定日本語案: コンテンツ, オファー another way へ resize text, または 決して needs へ reflow past 暫定日本語案: 320×256 CSS-pixel area — ただし typical responsive ページ doesn’t meet それらの 暫定日本語案: exceptions.) Per MDN: “Disabling zooming capabilities by settinguser-scalableto a value ofnoprevents people experiencing low vision conditions from being able to read and understand page content. Additionally, WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.” Blocking zoom locks out exact ユーザー who need it 大半の. - 暫定日本語案: It’s また ブラウザー-specific, ない universal. iOS Safari 10 と later ignore
暫定日本語案:
user-scalable=noと restrictivemaximum-scaleby デフォルト — その’s iOS 暫定日本語案: override, ない change へ ACT rule または へ WCAG’s intent. So on large share 暫定日本語案: of mobile トラフィック 設定 accomplishes nothing, while on ブラウザー その do 暫定日本語案: still honor it (older Android WebViews, some in-app ブラウザー) it actively fails 暫定日本語案: accessibility テスト above. Zero upside, real downside — と don’t treat “iOS ignores it” as proof markup is accessible everywhere.
暫定日本語案: rule is simple: don’t touch zoom. width=device-width, initial-scale=1 と
暫定日本語案: nothing else.
Is it ランキング factor
暫定日本語案: Be precise here, because lot of SEO コンテンツ overstates it. Here’s exactly 何 暫定日本語案: Google documents, と どこ line へ industry inference sits.
暫定日本語案: 何 Google documents: viewport tag is ない direct ランキング factor. 暫定日本語案: Google’s own supported-meta-tags doc says plainly その “presence of this tag indicates to Google that the page is mobile friendly” — その’s whole 暫定日本語案: documented claim: presence signals mobile-friendliness. Google doesn’t document 暫定日本語案: tag as scored, as rendering guarantee, または as proof ページ’s responsive design 暫定日本語案: is actually good.
Evidence for this claim Google documents that viewport-meta presence indicates a page is mobile friendly, but that statement does not establish that the tag itself is a ranking factor, a display guarantee or sufficient evidence of responsive quality. Scope: production HTML and HTTP responses Confidence: high · Verified: Meta tags and attributes that Google supports暫定日本語案: どこ practitioners connect dots (industry inference, ない Google 暫定日本語案: citation): 不足している または misconfigured viewport tag is 一般的な root cause of 暫定日本語案: mobile-usability failures (tiny text, horizontal scroll, unusable tap targets) その 暫定日本語案: SEOs generally understand へ degrade mobile ページ experience. その connection is 暫定日本語案: reasonable と widely held in industry, ただし it’s practitioner inference について 暫定日本語案: なぜ tag matters — ない something Google’s docs state as ランキング chain.
暫定日本語案: So honest framing: tag itself isn’t scored, と fix it because ページ 暫定日本語案: なしで it renders badly on phones — ない because Google documents it as ランキング 暫定日本語案: lever, direct または indirect. 保つ この separate から mobile-最初 インデックス登録 too: 暫定日本語案: その’s distinct Google 検索 concept について which version of あなた ページ Google 暫定日本語案: primarily 使用 向けに インデックス登録 と ランキング; viewport tag is について どのように その mobile 暫定日本語案: HTML renders in ブラウザー, full stop.
Evidence for this claim Mobile-first indexing means Google primarily uses the mobile content for indexing and ranking; it is a separate Google Search concept from the browser's viewport rendering contract. Scope: production HTML and HTTP responses Confidence: high · Verified: Mobile-first indexing best practicesどのように へ テスト it — tooling changed in 2023
暫定日本語案: この is どこ 大半の older guides are stale. On December 1, 2023, Google 暫定日本語案: retired 検索 Console’s Mobile Usability レポート, Mobile-Friendly テスト ツール, 暫定日本語案: と Mobile-Friendly テスト API (announced April 2023, confirmed 完全な その 暫定日本語案: December). Google’s reasoning was その other ツール had matured — “many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” So if tutorial tells あなた へ open 検索 Console → Mobile Usability へ 暫定日本語案: 確認 あなた viewport, その レポート no longer exists.
暫定日本語案: Layer これらの checks rather than relying on one ツール: confirm tag exists in 暫定日本語案: raw served HTML (ない just 後に JavaScript runs), confirm あなた responsive 暫定日本語案: breakpoints actually apply at phone widths, テスト zooming へ 200% なしで 暫定日本語案: layout breaking ( resize behavior WCAG’s intent is built around), と 暫定日本語案: spot-確認 in more than one ブラウザー — iOS Safari-だけ 確認 できる hide 暫定日本語案: zoom-restriction bug その Android または in-app ブラウザー still enforce.
暫定日本語案: あなた 現在の toolkit:
- 暫定日本語案: Lighthouse (in Chrome DevTools). relevant audit historically read “Does
not have a
<meta name="viewport">tag withwidthorinitial-scale” — it 暫定日本語案: fails unless<head>hasmeta name="viewport"whosecontent含む 暫定日本語案:width=. As of Lighthouse 13 it’s folded へ “Optimize viewport for mobile” 暫定日本語案: insight. - 暫定日本語案: PageSpeed Insights — runs Lighthouse plus field Core Web Vitals データ.
- 暫定日本語案: Chrome DevTools device toolbar — emulate phone dimensions と eyeball it.
- 暫定日本語案: Bing’s Mobile Friendliness テスト ツール — Bing checks viewport と zoom-control 暫定日本語案: configuration too, と recommends 同じ tag Google does.
- 暫定日本語案: View ソース / real-device 確認 — sometimes fastest テスト is へ just look
暫定日本語案: at
<head>on あなた phone.
よくある間違い
- 暫定日本語案: No tag at all (“viewport not set”) — ページ renders at legacy 暫定日本語案: desktop-ish width と shrinks.
- 暫定日本語案: ** hardcoded pixel width** like
width=1024instead ofdevice-width— tag 暫定日本語案: exists, ただし it still doesn’t match ページ へ device. Lighthouse と real 暫定日本語案: mobile-friendliness both want usablewidth=value, ない just any tag. - 暫定日本語案:
initial-scalebelow 1 — できる trigger legacy double-tap-zoom delay. - 暫定日本語案:
user-scalable=no/ restrictivemaximum-scale— copy-pasted から 古い 暫定日本語案: boilerplate; accessibility anti-pattern, ignored on iOS anyway.
暫定日本語案: 向けに どこ この sits in broader mobile 機能 — configuration, コンテンツ parity, 暫定日本語案: speed — see mobile SEO hub, mobile SEO 確認, と mobile-最初 暫定日本語案: インデックス登録. 向けに tag itself as part of wider on-ページ tag family, meta tags 暫定日本語案: cluster is map.
AI要約
暫定日本語案: condensed take on Advanced version:
- 暫定日本語案: ** viewport meta tag** —
<meta name="viewport" content="width=device-width, initial-scale=1">— hints ブラウザー へ size layout viewport へ device’s 暫定日本語案: width in CSS pixels instead of legacy ~980px fallback some mobile 暫定日本語案: ブラウザー 使用. It’s 何 lets responsive CSS media クエリ evaluate against 暫定日本語案: device’s real width on mobile. - 暫定日本語案: なしで it: some mobile ブラウザー render ページ at その wider fallback と 暫定日本語案: shrink it — tiny text, horizontal scroll, breakpoints その 可能性がある ない apply as 暫定日本語案: intended. Google: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down.”
- 暫定日本語案: Layout viewport vs. visual viewport:
width=device-widthsets layout 暫定日本語案: viewport (何 media クエリ evaluate against) と acts as minimum width; 暫定日本語案: pinch-zoom changes visual viewport だけ. - 暫定日本語案: Attributes:
width,initial-scale,minimum-scale,maximum-scale, 暫定日本語案:user-scalable, と newerinteractive-widgetとviewport-fit(both 暫定日本語案: ブラウザー-layout edge ケース, ない SEO directives). 使用width=device-width, 暫定日本語案: initial-scale=1と nothing else. - 暫定日本語案: 決して disable zoom:
user-scalable=no/maximum-scalebelow2fails 暫定日本語案: W3C’s ACT rule 向けに zoom (b4f0c3) と 機能 against WCAG’s resize intent — と 暫定日本語案: iOS 10+ overrides it by デフォルト, so it’s accessibility downside とともに zero 暫定日本語案: upside anywhere. - 暫定日本語案: ランキング: Google documents だけ その presence “indicates to Google that the page is mobile friendly” — ない その tag is scored, と ない stated ランキング 暫定日本語案: chain 通じて usability signals (その link is industry inference, ない Google 暫定日本語案: citation). Distinct から mobile-最初 インデックス登録 (which version is インデックス登録, ない 暫定日本語案: どのように it renders).
- 暫定日本語案: テスト changed: 検索 Console’s Mobile Usability レポート, Mobile-Friendly 暫定日本語案: テスト ツール, と its API were retired Dec 1, 2023 — 使用 Lighthouse, 暫定日本語案: PageSpeed Insights, DevTools device toolbar, または Bing’s Mobile Friendliness テスト; 暫定日本語案: layer in 200%-zoom 確認 と more than one ブラウザー.
- 暫定日本語案: 一般的な mistakes: no tag, hardcoded
width=1024,initial-scale< 1, 暫定日本語案: copy-pasteduser-scalable=no. Google と Bing recommend identical value.
公式ドキュメント
暫定日本語案: 主要-ソース ドキュメント と standards references.
暫定日本語案: Google
- 暫定日本語案: Meta tags と attributes その Google supports — lists viewport tag と states its presence “indicates to Google that the page is mobile friendly.” 現在の, live ソース (Google’s dedicated older
configure-viewportdoc has been retired). - 暫定日本語案: Does ない have
<meta name="viewport">tag とともに width または initial-scale (Lighthouse) — audit definition, desktop-width-fallback explanation, と recommended fix code. - 暫定日本語案: 何 Viewport? — Chrome 向けに Developers / web.dev on legacy ~980px デフォルト と layout vs. visual viewport.
- 暫定日本語案: role of ページ experience in creating 役立つ コンテンツ (Apr 2023) — どこ Google announced Dec 1, 2023 retirement of Mobile Usability レポート と Mobile-Friendly テスト ツール/API, pointing へ Lighthouse.
暫定日本語案: Standards / technical reference
- 暫定日本語案:
<meta name="viewport">(MDN Web Docs) — 主要 attribute-by-attribute reference:width,initial-scale,minimum-scale,maximum-scale,user-scalable,interactive-widget,viewport-fit, iOS 10+ override behavior, と WCAG accessibility warning. - 暫定日本語案: MDN: Responsive design — viewport meta tag — plain statement その breakpoints と media クエリ “may not work as intended” なしで tag.
- 暫定日本語案: MDN: CSS viewport concepts — qualifies ~980px fallback へ “some mobile browsers,” ない universal デフォルト.
- 暫定日本語案: W3C WAI: ACT rule “Meta viewport allows for zoom” (b4f0c3) — precise accessibility conformance テスト:
user-scalable=noとmaximum-scale下で2fail, とともに rule’s own applicability と assumptions spelled out.
暫定日本語案: Bing / Microsoft
- 暫定日本語案: Bing’s Mobile Friendliness テスト ツール (in Bing Webmaster ツール) evaluates viewport と zoom-control configuration, コンテンツ width, text readability, tap-target spacing, と incompatible plug-ins, と recommends 同じ
width=device-width, initial-scale=1value Google does. (Bing 役立つ-doc URLs move periodically; 確認 現在の Bing Webmaster ツール 役立つ center 向けに live ページ.)
出典からの引用
暫定日本語案: On—record statements から Google’s ドキュメント と MDN. 各 link jumps へ 暫定日本語案: quoted passage on ソース ページ どこ deep link is 利用可能.
暫定日本語案: Google — 何 tag does と なぜ
- 暫定日本語案: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” 暫定日本語案: — Lighthouse / Chrome 向けに Developers (Google). 暫定日本語案: Jump へ quote
- 暫定日本語案: “Presence of this tag indicates to Google that the page is mobile friendly.” 暫定日本語案: — Meta tags と attributes その Google supports, Google 検索 Central docs. 暫定日本語案: Read doc
暫定日本語案: MDN — accessibility warning
- 暫定日本語案: “Disabling zooming capabilities by setting
user-scalableto a value ofnoprevents people experiencing low vision conditions from being able to read and understand page content.” 暫定日本語案: — MDN Web Docs. 暫定日本語案: Read reference - 暫定日本語案: On
user-scalable,minimum-scale, とmaximum-scale: “Browser settings can ignore this rule, and iOS10+ ignores it by default.” 暫定日本語案: Read reference
暫定日本語案: W3C — accessibility conformance テスト 向けに zoom
- 暫定日本語案: Applicability: “This rule applies to each
contentattribute on ametaelement with anameattribute value ofviewportfor which at least one of the following is true: thecontentattribute value has theuser-scalableproperty; or thecontentattribute value has themaximum-scaleproperty.” Expectation: attribute value 必要がある ない 設定user-scalableへno, と 必要がある ない 設定maximum-scalebelow2. 暫定日本語案: — W3C WAI, ACT rule “Meta viewport allows for zoom” (b4f0c3). 暫定日本語案: Read rule
暫定日本語案: MDN — qualifying legacy fallback と breakpoint behavior
- 暫定日本語案: “If the site isn’t designed to work well on small viewports and this tag is omitted, some mobile browsers render the site using a fixed initial containing block width, typically 980px.” 暫定日本語案: — MDN, CSS viewport concepts. 暫定日本語案: Read reference
- 暫定日本語案: “Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers.” 暫定日本語案: — MDN, Responsive design guide. 暫定日本語案: Read reference
暫定日本語案: Google — retiring mobile ツール (Dec 2023) (via 検索エンジン Land’s verbatim coverage)
- 暫定日本語案: “In the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” 暫定日本語案: Read coverage
暫定日本語案: Note: Meta-tags doc と MDN reference render fine, ただし December 2023 ツール-retirement statement is linked 通じて 検索エンジン Land’s verbatim coverage of Google’s announcement ( original was posted on Google’s blog と social チャネル); confirm against live Google post 前に treating it as final. Google 検索 Central meta-tags ページ is cited なしで text-fragment deep link because its コンテンツ loads クライアント-side.
Which viewport configuration すべき I 使用
暫定日本語案: 向けに almost すべての サイト answer is 同じ one line — ただし 人々 talk themselves 暫定日本語案: へ “clever” variants その cause 問題. クリック 通じて へ land on right 暫定日本語案: value (と へ rule out anti-patterns).
Choosing your viewport meta tag value
Viewport tag 確認
暫定日本語案: quick pass へ confirm tag is present と sane:
- 暫定日本語案: [ ]
<meta name="viewport">tag exists in<head>(view ソース または 確認 暫定日本語案: あなた template/theme head partial). - 暫定日本語案: [ ] It’s placed high in
<head>, nearcharset, 前に コンテンツ-dependent 暫定日本語案: tags. - 暫定日本語案: [ ]
contentvalue iswidth=device-width, initial-scale=1. - 暫定日本語案: [ ]
widthisdevice-width— ない hardcoded pixel number like1024. - 暫定日本語案: [ ]
initial-scaleis1— ない below 1 (avoids double-tap-zoom delay). - 暫定日本語案: [ ] No
user-scalable=noと no restrictivemaximum-scale(zoom stays 暫定日本語案: enabled — accessibility). - 暫定日本語案: [ ] Verified とともに Lighthouse または PageSpeed Insights (ない retired 暫定日本語案: Mobile-Friendly テスト / Mobile Usability レポート).
- 暫定日本語案: [ ] Spot-確認 on real phone または in Chrome DevTools device toolbar — text 暫定日本語案: is readable, no horizontal scroll.
- 暫定日本語案: [ ] あなた responsive CSS breakpoints actually apply at phone widths (それら 可能性がある ない 暫定日本語案: なしで 正しい viewport tag).
- 暫定日本語案: [ ] Zoomed へ 200% と layout still 機能 なしで コンテンツ getting clipped.
- 暫定日本語案: [ ] Spot-確認 in more than one ブラウザー/engine, ない just あなた デフォルト — 暫定日本語案: iOS-だけ 確認 できる hide zoom restriction その other ブラウザー still enforce.
Viewport meta tag — cheat sheet
暫定日本語案: ** one line あなた want**
<meta name="viewport" content="width=device-width, initial-scale=1">暫定日本語案: Google, Bing, と Lighthouse all recommend この exact value.
暫定日本語案: Attribute reference
| Directive | 使用 | Notes |
|---|---|---|
width | device-width | または 1–10000 px; 使用 device-width. |
initial-scale | 1 | 0,0–10,0; below 1 triggers double-tap-zoom delay. |
minimum-scale | (omit) | iOS 10+ ignores. |
maximum-scale | (omit) | iOS 10+ ignores; don’t restrict zoom. |
user-scalable | (omit; デフォルト yes) | no = fails zoom accessibility rule; iOS 10+ overrides it. |
interactive-widget | (optional) | resizes-visual (デフォルト) / resizes-content / overlays-content. |
暫定日本語案: Symptoms of 不足している/broken tag
- 暫定日本語案: Tiny, unreadable text on mobile.
- 暫定日本語案: Horizontal scrolling / pinch-へ-zoom needed.
- 暫定日本語案: Responsive breakpoints ない applying as intended on phones.
- 暫定日本語案: “Viewport not set” in audit.
暫定日本語案: Do / Don’t
- 暫定日本語案: ✅
width=device-width, initial-scale=1, high in<head>. - 暫定日本語案: ❌ Hardcoded
width=1024. - 暫定日本語案: ❌
initial-scalebelow 1. - 暫定日本語案: ❌
user-scalable=no/maximum-scale=1.
暫定日本語案: ランキング reality: ない direct ランキング factor. Google documents だけ その its 暫定日本語案: presence indicates mobile-friendliness — usability→ページ-experience chain is 暫定日本語案: industry inference, ない Google-documented ランキング mechanism.
暫定日本語案: テスト とともに: Lighthouse · PageSpeed Insights · Chrome DevTools device toolbar · 暫定日本語案: Bing Mobile Friendliness テスト. ない Mobile-Friendly テスト または 検索 Console 暫定日本語案: Mobile Usability レポート — both retired Dec 1, 2023.
Viewport anti-patterns
暫定日本語案: four ways 人々 get この tag 誤った, と 何 へ do instead.
暫定日本語案: 1. Disabling zoom (user-scalable=no / maximum-scale=1).
暫定日本語案: intent is usually “stop pinch-zoom from breaking my layout.” reality: it
暫定日本語案: fails W3C’s accessibility conformance rule 向けに zoom と locks low-vision ユーザー
暫定日本語案: out of scaling text, と iOS 10+ overrides it by デフォルト — so it does nothing on
暫定日本語案: huge share of トラフィック while still failing その accessibility テスト on ブラウザー
暫定日本語案: その do honor it. Fix: 削除 it entirely; 保つ だけ width=device-width, 暫定日本語案: initial-scale=1.
暫定日本語案: 2. Hardcoding pixel width (width=1024).
暫定日本語案: viewport tag exists, so audits sometimes half-pass, ただし ページ is still pinned
暫定日本語案: へ fixed width その doesn’t match real devices. Fix: 使用 width=device-width.
暫定日本語案: 3. initial-scale below 1 へ “fit more on screen.”
暫定日本語案: Shrinking initial zoom できる trigger legacy double-tap-へ-zoom behavior その
暫定日本語案: adds interaction delay, と it 作る text smaller 向けに everyone. Fix:
暫定日本語案: initial-scale=1 と let あなた responsive CSS handle layout.
暫定日本語案: 4. Relying on retired GSC Mobile Usability レポート へ catch 問題. 暫定日本語案: その レポート, Mobile-Friendly テスト ツール, と its API were retired December 1, 2023. 暫定日本語案: If あなた QA プロセス still says “check Mobile Usability,” it’s silently doing 暫定日本語案: nothing. Fix: audit とともに Lighthouse / PageSpeed Insights instead.
暫定日本語案: Bonus — treating tag as ランキング lever. 暫定日本語案: It’s ない one. Adding it won’t lift rankings; it just 作る ページ render correctly 暫定日本語案: so it できる pass mobile-friendliness checks その do フィード ページ experience. 設定 暫定日本語案: it once, correctly, と move on.
確認 と audit あなた viewport tag
暫定日本語案: Ways へ verify tag 全体で ページ または whole サイト, から quick console snippet 暫定日本語案: へ クロール.
暫定日本語案: DevTools console — inspect 現在の ページ’s viewport tag
// Paste into the Chrome DevTools console on the page you're checking.
const vp = document.querySelector('meta[name="viewport"]');
if (!vp) {
console.warn('❌ No viewport meta tag — "viewport not set".');
} else {
const c = vp.getAttribute('content') || '';
console.log('viewport content:', c);
console.log(/width\s*=\s*device-width/i.test(c) ? '✅ width=device-width' : '⚠️ width is not device-width');
console.log(/user-scalable\s*=\s*no/i.test(c) || /maximum-scale\s*=\s*[01](\.0)?\b/i.test(c)
? '⚠️ zoom is restricted — accessibility anti-pattern' : '✅ zoom not restricted');
}暫定日本語案: Bookmarklet — one-クリック 確認
javascript:(function(){var v=document.querySelector('meta[name=viewport]');alert(v?('viewport: '+v.content):'NO VIEWPORT TAG (viewport not set)');})();暫定日本語案: Shell — fetch URL と grep raw HTML head
# Prints the viewport tag from a page's server-rendered HTML (or nothing if absent).
curl -s https://example.com | grep -io '<meta[^>]*name=["'\'']*viewport[^>]*>'暫定日本語案: Shell — flag ページ その restrict zoom 全体で list of URLs
# urls.txt = one URL per line. Prints any page whose viewport disables/limits zoom.
while read -r u; do
html=$(curl -s "$u")
echo "$html" | grep -iq 'name=["'\'']*viewport' || { echo "MISSING $u"; continue; }
echo "$html" | grep -io '<meta[^>]*viewport[^>]*>' | grep -Eiq 'user-scalable=no|maximum-scale=[01]' \
&& echo "ZOOM-OFF $u"
done < urls.txt暫定日本語案: Regex — match tag in ソース (向けに code 検索 / linter rule)
<meta[^>]+name=["']?viewport["']?[^>]*>暫定日本語案: へ flag anti-pattern specifically, 検索 向けに:
viewport[^>]*(user-scalable\s*=\s*no|maximum-scale\s*=\s*[01])暫定日本語案: 向けに whole-サイト sweep, crawler (Screaming Frog, Ahrefs サイト Audit) is faster than 暫定日本語案: scripting — see ツール tab.
ツール 向けに 確認 viewport tag
- 暫定日本語案: Lighthouse (Chrome DevTools → Lighthouse, または CLI) — direct replacement 暫定日本語案: 向けに retired Mobile-Friendly テスト; runs viewport audit (“Optimize viewport for mobile” in Lighthouse 13+) plus rest of mobile usability と パフォーマンス.
- 暫定日本語案: PageSpeed Insights — Lighthouse in ブラウザー, とともに field Core Web Vitals 暫定日本語案: データ alongside lab audit.
- 暫定日本語案: Chrome DevTools device toolbar — toggle device emulation と eyeball ページ 暫定日本語案: at phone dimensions; fastest way へ see broken viewport.
- 暫定日本語案: Bing Mobile Friendliness テスト ツール (Bing Webmaster ツール) — checks viewport と 暫定日本語案: zoom-control configuration と recommends 同じ tag.
- 暫定日本語案: Screaming Frog SEO Spider / Ahrefs サイト Audit — クロール whole サイト と 暫定日本語案: surface ページ 不足している viewport tag (または restricting zoom) at scale, instead of 暫定日本語案: 確認 URLs one at time.
- 暫定日本語案: View ソース on あなた phone — lowest-tech 確認: is tag actually in
暫定日本語案:
<head>of served HTML?
暫定日本語案: Note retirements: 検索 Console’s Mobile Usability レポート, Mobile-Friendly 暫定日本語案: テスト ツール, と Mobile-Friendly テスト API were all retired on December 1, 2023 — 暫定日本語案: don’t reach 向けに them.
viewport tag is present ただし ページ still looks desktop-sized
暫定日本語案: Symptom: ソース contains viewport tag, yet phones 表示 tiny text または wide layout.
暫定日本語案: Likely cause: there are duplicate viewport tags, tag is injected too late, または
暫定日本語案: responsive CSS 決して loads. Fix: 保つ one tag in サーバー-rendered <head>,
暫定日本語案: 削除 conflicting copies, と verify その expected media クエリ are applied in
暫定日本語案: rendered ページ.
Mobile layout 機能 at 最初 と then jumps wider
暫定日本語案: Symptom: initial layout fits, then horizontal scrolling 表示される 後に load. 暫定日本語案: Likely cause: JavaScript adds fixed-width widget, table, banner, または iframe 後に 暫定日本語案: viewport is established. Fix: inspect rendered DOM at moment overflow 暫定日本語案: starts と constrain injected element. Changing viewport value cannot repair 暫定日本語案: element その is intrinsically wider than screen.
Pinch zoom is blocked
暫定日本語案: Symptom: ユーザー cannot zoom, even though ページ otherwise fits. Likely cause:
暫定日本語案: user-scalable=no または restrictive maximum-scale remains in viewport コンテンツ.
暫定日本語案: Fix: 削除 それらの restrictions と retest とともに ブラウザー zoom と OS text scaling.
暫定日本語案: Do ない treat iOS override as proof その markup is accessible everywhere.
crawler レポート tag 不足している ただし ブラウザー 表示 it
暫定日本語案: Symptom: rendered ブラウザー sees tag, while raw-HTML crawler does ない. 暫定日本語案: Likely cause: クライアント-side JavaScript inserts it. Fix: emit tag in 暫定日本語案: initial document head. foundational rendering instruction すべき ない depend on 暫定日本語案: script running successfully.
Validate viewport-tag change
| テスト へ run | Expected result | Failure interpretation | 監視 window | Rollback trigger |
|---|---|---|---|---|
View initial HTML レスポンス と inspect <head> | Exactly one viewport tag contains width=device-width, initial-scale=1 | tag is 不足している, duplicated, または dependent on JavaScript | すべての template release | Roll back if shared template removes または duplicates tag |
| Load ページ at several phone widths in DevTools | CSS media クエリ activate at intended widths と コンテンツ fits | viewport is 正しい ただし responsive CSS または fixed-width child is broken | 前に と immediately 後に deployment | Roll back if 主要 コンテンツ または navigation becomes unusable |
| Run Lighthouse とともに mobile profile | viewport audit passes | served または rendered configuration still 防ぐ mobile-sized layout | 前に と 後に change | Roll back if change introduces another high-impact mobile failure |
| テスト pinch zoom と increased text size on physical phone | ユーザー できる zoom と text reflows なしで clipping | Scaling restrictions または fixed-height components remain | Release day と 後に design-system changes | Roll back if essential controls cannot be reached at enlarged text sizes |
| クロール sample から すべての ページ template using raw HTML | すべての sample exposes 同じ 有効 tag in head | template または rendering path has inconsistent markup | 後に deployment と in scheduled template QA | Roll back affected template if ページ revert へ legacy desktop viewport |
時間を使う価値のあるリソース
暫定日本語案: My related writing
- 暫定日本語案: Beginner’s Guide へ Technical SEO — どこ mobile rendering と ページ experience fit bigger technical picture.
- 暫定日本語案: Core Web Vitals: 何 それら Are & どのように へ Improve Yours — パフォーマンス side of mobile experience その sits next へ viewport tag.
暫定日本語案: My speaking
- 暫定日本語案: どのように 検索 機能 (SlideShare) — my walkthrough of クロール, rendering, インデックス登録, と ランキング, including どのように Googlebot crawls と renders as smartphone. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.”)
暫定日本語案: から around industry
- 暫定日本語案:
<meta name="viewport">(MDN Web Docs) — precise attribute-by-attribute reference, iOS override behavior, と WCAG accessibility warning. - 暫定日本語案: Does ない have
<meta name="viewport">tag とともに width または initial-scale (Lighthouse) (Chrome 向けに Developers) — audit definition, desktop-width-fallback explanation, と recommended fix. - 暫定日本語案: 何 Viewport? (Chrome 向けに Developers) — legacy ~980px デフォルト と layout vs. visual viewport, explained by Google.
- 暫定日本語案: Meta tags と attributes その Google supports (Google 検索 Central) — 現在の doc その names viewport tag as mobile-friendliness signal.
- 暫定日本語案: Google Officially Drops Mobile Usability レポート, Mobile-Friendly テスト ツール と API (検索エンジン Land) — December 2023 retirements と Lighthouse recommendation.
- 暫定日本語案: あなた できる stop using ユーザー-scalable=no と maximum-scale=1 in viewport meta tags 現在 (Luke Plant) — background on なぜ restrictive zoom attributes existed と なぜ それら’re obsolete と overridden on iOS.
- 暫定日本語案: Beginner’s Guide へ Viewport Meta Tags (Semrush) — well-rounded competitor explainer covering
interactive-widget, iOS 10 override, と WCAG warning.
テスト yourself: Viewport Meta Tag
暫定日本語案: Five quick questions on viewport meta tag. Pick answer 向けに 各, then 確認.
変更履歴
2026年7月18日に更新。
編集概要と記録された変更の詳細。変更の詳細
-
変更の詳細な注記は現在英語でのみ提供されています。
-
変更の詳細な注記は現在英語でのみ提供されています。
-
変更の詳細な注記は現在英語でのみ提供されています。
-
変更の詳細な注記は現在英語でのみ提供されています。
-
変更の詳細な注記は現在英語でのみ提供されています。
完全な比較は利用できません — この改訂の以前のスナップショットがアーカイブされていません。