What is the standard, recommended viewport meta tag value?

content="width=1024, initial-scale=1"

content="width=device-width, user-scalable=no"

content="initial-scale=0.8, maximum-scale=1"

What happens on a phone if a page has no viewport meta tag?

Many mobile browsers fall back to a legacy ~980px-wide layout and shrink the page, causing tiny text and horizontal scroll

The browser blocks the page from loading until one is added

The page automatically becomes responsive

Google refuses to index the page

Why is forcing user-scalable=no considered an anti-pattern?

It fails the W3C's accessibility conformance rule for zoom and blocks low-vision users, and iOS 10+ overrides it anyway

It slows down page load significantly

It permanently removes the page from Google's index

It disables responsive CSS media queries

Is the viewport meta tag a direct Google ranking factor?

No — Google documents its presence as a mobile-friendliness signal; the usability→ranking connection is industry inference, not a stated ranking mechanism

Yes — adding it directly boosts rankings

Yes — it's one of the top three ranking factors

No — and it has no relationship to SEO at all

How should you check your viewport tag now that Search Console's Mobile Usability report is gone?

Use Lighthouse or PageSpeed Insights

Reopen the Mobile-Friendly Test tool

Use the Mobile-Friendly Test API

Wait for Google to email you a report

Panduan Viewport Meta Tag

TL;DR — viewport meta tag adalah one line di Anda halaman’s <head> itu tells phones dan tablets untuk render Anda halaman di screen’s nyata width alih-alih pretending ini adalah sebuah desktop monitor. Without ini, Anda halaman menampilkan up tiny dan Anda memiliki untuk pinch dan scroll sideways untuk read ini. line Anda ingin adalah <meta name="viewport" content="width=device-width, initial-scale=1">.

What viewport meta tag adalah

When smartphones pertama got web browser, sebagian besar situs web adalah dibangun untuk desktop screens. So banyak phone browser cheated: without sebuah viewport tag, mereka’d fall back untuk sebuah fixed ~980 pixel wide layout — desktop-ish — lay halaman out di itu width, lalu shrink whole thing down untuk fit phone. hasil adalah sebuah readable-shaped halaman itu adalah cara too kecil untuk actually read, dengan text Anda memiliki untuk pinch-zoom dan konten itu spilled off sides.

viewport meta tag turns itu off. ini adalah sebuah single line Anda put di <head> dari Anda halaman:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width tells browser “lay this page out at this device’s screen width, measured in CSS pixels” (terjemahan) “lay ini halaman out di ini device’s screen width, diukur di CSS pixels” (not necessarily yang sama sebagai -nya raw hardware-pixel count pada sebuah tinggi-density screen), dan initial-scale=1 says “and don’t zoom in or out when the page first loads.” (terjemahan) “dan don’t zoom di atau out when halaman pertama memuat.” itu’s ini. Copy itu line, paste ini near top dari Anda <head>, done.

mengapa ini penting

Two alasan:

ini membuat Anda halaman readable pada sebuah phone. dengan tag, text adalah legible without zooming dan konten fits screen. Without ini, Anda get shrunk-down, tiny-text, horizontal-scroll experience.
ini adalah what membuat “responsive design” (terjemahan) “responsive design” actually berfungsi. jika Anda situs menggunakan modern responsive CSS (layouts itu adapt untuk screen size), itu aturan adalah dimaksudkan untuk kick di berdasarkan browser’s actual screen width. viewport tag adalah what tells ini itu width. Without ini, Anda responsive breakpoints dapat not apply cara Anda designed them untuk mobile.

sebagian besar modern themes dan situs builders tambahkan ini tag untuk Anda automatically. tetapi older templates, hand-dibangun halaman, dan beberapa halaman builders miss ini — which adalah why “viewport not set” (terjemahan) “viewport not set” masih menampilkan up di audits.

mistake untuk hindari

Anda mungkin see sebuah versi dari ini tag dengan user-scalable=no pada end — itu’s someone trying untuk stop pengunjung dari zooming so mereka dapat’t “break” (terjemahan) “break” layout. Don’t melakukan itu. ini stops people dengan rendah vision dari zooming di untuk read Anda halaman, dan modern iPhones ignore setting anyway, so ini melakukan nothing except hurt accessibility. Leave zoom alone.

How ini fits rest dari mobile SEO

viewport tag adalah one kecil piece dari bigger mobile picture — ini adalah tentang how Anda halaman renders pada sebuah phone, which adalah berbeda dari pengindeksan mobile-pertama (tentang which versi dari Anda halaman Google reads). jika Anda’re doing sebuah full mobile pass, mobile SEO hub, mobile SEO checklist, dan pengindeksan mobile-pertama cover rest.

ingin exact attribute reference, accessibility detail, dan cara test tag now itu Google’s old Mobile-Friendly Test adalah hilang? Switch untuk Advanced tab.

TL;DR — viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints browser untuk size layout viewport untuk device’s width di CSS pixels alih-alih sebuah legacy ~980px fallback beberapa mobile browser gunakan, which adalah what lets responsive CSS media kueri evaluate terhadap device’s nyata width pada mobile. Missing atau misconfigured, ini adalah sebuah classic mobile usability failure (tiny text, horizontal scroll). ini adalah not sebuah peringkat factor — Google documents -nya presence sebagai one thing -nya mobile-friendliness evaluation memeriksa untuk, dan no more daripada itu. tidak pernah force user-scalable=no / restrictive maximum-scale: ini fails W3C’s ACT accessibility aturan untuk zoom, though browser overrides exist (iOS 10+ ignores ini oleh default). Google dan Bing recommend identical tag. Test dengan Lighthouse / PageSpeed Insights — Search Console’s Mobile Usability report dan Mobile-Friendly Test adalah retired December 1, 2023.

masalah ini solves: ~980px virtual viewport

untuk memahami tag Anda memiliki untuk memahami what ini adalah overriding. When mobile browser adalah baru, lack dari sebuah viewport tag dimaksudkan beberapa dari them akan fall back untuk sebuah fixed layout width dari roughly 980px dan render di itu size — sebuah deliberate accommodation so desktop-sized, pre-responsive situs wouldn’t completely break pada early smartphones. browser lalu scaled hasil down untuk 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.” (terjemahan) “jika situs isn’t designed untuk berfungsi well pada kecil viewports dan ini tag adalah omitted, beberapa mobile browser render situs menggunakan sebuah fixed initial containing block width, typically 980px.” — ini adalah sebuah browser-spesifik fallback, not sebuah universal spec constant.

consequence, di Google’s own kata: “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.” (terjemahan) “Without sebuah viewport meta tag, mobile devices render halaman di typical desktop screen widths dan lalu scale halaman down, membuat them difficult untuk read.” Anda get unreadable text, forced pinch-zooming, dan horizontal scrolling — textbook symptoms dari sebuah halaman flagged “not mobile-friendly.” (terjemahan) “not mobile-friendly.”

Setting tag “lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” (terjemahan) “lets Anda control width dan scaling dari viewport so itu ini adalah sized correctly pada semua devices.”

Layout viewport vs. visual viewport (di bawah hood)

Two “viewports” (terjemahan) “viewports” adalah di play, dan ini adalah worth keeping them straight:

layout viewport adalah area halaman lays out ke dan itu fixed-position elements attach untuk. width=device-width sets ini untuk device’s screen width di CSS pixels.
visual viewport adalah what pengguna adalah currently looking di — which perubahan when mereka pinch-zoom. Zooming perubahan visual viewport tanpa mengubah layout viewport.

alasan ini penting untuk SEO dan CSS: Anda responsive media kueri (@media (max-width: 600px) dan friends) adalah evaluated terhadap layout viewport. jika layout viewport adalah stuck di sebuah legacy ~980px fallback because there’s no viewport tag, sebuah phone dapat match Anda desktop breakpoints alih-alih Anda narrow ones. MDN puts ini plainly: “Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers.” (terjemahan) “Without ini, Anda responsive design dengan breakpoints dan media kueri dapat not berfungsi sebagai intended pada mobile browser.” tag adalah what membuat device-width layout viewport so Anda intended breakpoints evaluate correctly.

correct tag, dan where ini goes

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- ...the rest of your head... -->
</head>

Put ini tinggi di <head>, near charset, sebelum konten-dependent tags. ini adalah nilai Google, Bing, dan Lighthouse semua recommend — verbatim, ini adalah fix Lighthouse itself suggests. Don’t overthink nilai: width=device-width, initial-scale=1 adalah jawaban untuk essentially setiap responsive situs.

Attribute reference

content attribute adalah sebuah comma-separated list dari directives. MDN adalah canonical attribute-oleh-attribute reference; here’s what setiap one melakukan:

Directive	What ini melakukan	Notes
`width`	Controls (minimum) pixel width dari viewport	sebuah whole angka 1–10000, atau special nilai `device-width` ( screen width di CSS pixels). gunakan `device-width`.
`initial-scale`	zoom ratio antara device width dan viewport pada muat	sebuah angka `0.0`–`10.0`. gunakan `1`.
`minimum-scale`	minimum zoom tingkat allowed	harus menjadi ≤ `maximum-scale`. iOS 10+ ignores ini oleh default.
`maximum-scale`	maximum zoom-di allowed	harus menjadi ≥ `minimum-scale`. iOS 10+ ignores ini oleh default. Don’t restrict ini.
`user-scalable`	Whether pengguna dapat zoom (`yes`/`no`, default `yes`)	iOS 10+ ignores ini oleh default. Setting `no` adalah sebuah accessibility anti-pattern — leave ini.
`interactive-widget`	How interactive UI (e.g. virtual keyboards) affect viewport	nilai: `resizes-visual` (default), `resizes-content`, `overlays-content`. Newer; sebagian besar SEO konten omits ini.
`viewport-fit`	How viewport handles display cutouts (notches)	nilai: `auto` (default), `contain` (fits inside largest rectangle itu menghindari cutout), `cover` (fills display — pair dengan CSS `env()` safe-area-inset variables so konten doesn’t land di bawah cutout).

viewport-fit dan interactive-widget adalah both browser-layout edge cases — display-cutout dan virtual-keyboard handling, respectively — not SEO directives; sebagian besar SEO-focused guides skip them entirely.

sebuah kecil tetapi nyata gotcha dari Lighthouse’s own docs: setting initial-scale below 1 dapat trigger sebuah legacy double-tap-untuk-zoom perilaku itu menambahkan interaction delay — lainnya alasan untuk stick dengan initial-scale=1 alih-alih getting clever.

tidak pernah disable zoom: `user-scalable=no` adalah sebuah anti-pattern

Anda’ll masih temukan user-scalable=no (atau maximum-scale=1) copy-pasted ke old theme boilerplate, biasanya dari sebuah developer who didn’t ingin pinch-zoom “messing up” (terjemahan) “messing up” mereka layout. ini adalah wrong pada two counts:

ini fails web’s own accessibility conformance test untuk zoom, dan ini berfungsi terhadap WCAG’s intent. W3C’s ACT aturan “Meta viewport allows for zoom” (terjemahan) “Meta viewport allows untuk zoom” (aturan b4f0c3) applies untuk apa pun viewport tag itu sets user-scalable atau maximum-scale, dan -nya expectation adalah explicit: tag harus not set user-scalable=no, dan maximum-scale harus not menjadi set below 2. ( aturan carries stated assumptions — ini doesn’t apply jika halaman memiliki no terlihat konten, offers lainnya cara untuk resize text, atau tidak pernah perlu untuk reflow past sebuah 320×256 CSS-pixel area — tetapi sebuah typical responsive halaman doesn’t meet itu exceptions.) Per MDN: “Disabling zooming capabilities by setting user-scalable to a value of no prevents 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.” (terjemahan) “Disabling zooming capabilities oleh setting undefined untuk sebuah nilai dari undefined mencegah people experiencing rendah vision conditions dari menjadi able untuk read dan memahami halaman konten. Additionally, WCAG memerlukan sebuah minimum dari 2× scaling; however, best practice adalah untuk enable sebuah 5× zoom.” Blocking zoom locks out exact pengguna who perlu ini sebagian besar.
ini adalah juga browser-spesifik, not universal. iOS Safari 10 dan later ignore user-scalable=no dan restrictive maximum-scale oleh default — itu’s sebuah iOS override, not sebuah perubahan untuk ACT aturan atau untuk WCAG’s intent. So pada sebuah besar share dari mobile traffic setting accomplishes nothing, while pada browser itu melakukan masih honor ini (older Android WebViews, beberapa di-app browser) ini actively fails accessibility test above. Zero upside, nyata downside — dan don’t treat “iOS ignores it” (terjemahan) “iOS ignores ini” sebagai proof markup adalah accessible everywhere.

aturan adalah sederhana: don’t touch zoom. width=device-width, initial-scale=1 dan nothing else.

adalah ini sebuah peringkat factor?

menjadi precise here, because sebuah lot dari SEO konten overstates ini. Here’s exactly what Google documents, dan where line untuk industry inference sits.

What Google documents: viewport tag adalah not sebuah direct peringkat factor. Google’s own didukung-meta-tags doc says plainly itu “presence of this tag indicates to Google that the page is mobile friendly” (terjemahan) “presence dari ini tag indicates untuk Google itu halaman adalah mobile friendly” — itu’s whole documented claim: presence signals mobile-friendliness. Google doesn’t document tag sebagai scored, sebagai sebuah rendering guarantee, atau sebagai proof sebuah halaman’s responsive design adalah actually baik.

Where practitioners connect dots (industry inference, not sebuah Google citation): sebuah missing atau misconfigured viewport tag adalah sebuah umum root cause dari mobile-usability failures (tiny text, horizontal scroll, unusable tap targets) itu SEOs umumnya memahami untuk degrade mobile pengalaman halaman. itu connection adalah reasonable dan widely held di industry, tetapi ini adalah sebuah practitioner inference tentang why tag penting — not something Google’s docs state sebagai sebuah peringkat chain.

So honest framing: tag itself isn’t scored, dan fix ini because sebuah halaman without ini renders badly pada phones — not because Google documents ini sebagai sebuah peringkat lever, direct atau indirect. pertahankan ini separate dari pengindeksan mobile-pertama too: itu’s sebuah distinct Google Search concept tentang which versi dari Anda halaman Google primarily menggunakan untuk pengindeksan dan peringkat; viewport tag adalah tentang how itu mobile HTML renders di sebuah browser, full stop.

cara test ini — tooling changed di 2023

ini adalah where sebagian besar older guides adalah stale. pada December 1, 2023, Google retired Search Console’s Mobile Usability report, Mobile-Friendly Test alat, dan Mobile-Friendly Test API (announced April 2023, confirmed complete itu December). Google’s reasoning adalah itu lainnya alat memiliki matured — “many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” (terjemahan) “banyak lainnya robust resources untuk evaluating mobile usability memiliki emerged, including Lighthouse dari Chrome.” So jika sebuah tutorial tells Anda untuk open Search Console → Mobile Usability untuk periksa Anda viewport, itu report no longer exists.

Layer ini memeriksa alih-alih relying pada one alat: confirm tag exists di raw disajikan HTML (not hanya setelah JavaScript runs), confirm Anda responsive breakpoints actually apply di phone widths, test zooming untuk 200% without layout breaking ( resize perilaku WCAG’s intent adalah dibangun sekitar), dan spot-periksa di more daripada one browser — sebuah iOS Safari-hanya periksa dapat hide sebuah zoom-restriction bug itu Android atau di-app browser masih enforce.

Anda saat ini toolkit:

Lighthouse (di Chrome DevTools). relevant audit historically read “Does not have a <meta name="viewport"> tag with width or initial-scale” (terjemahan) “melakukan not memiliki sebuah undefined tag dengan undefined atau undefined” — ini fails unless <head> memiliki sebuah meta name="viewport" whose content mencakup width=. sebagai dari Lighthouse 13 ini adalah folded ke “Optimize viewport for mobile” (terjemahan) “mengoptimalkan viewport untuk mobile” insight.
PageSpeed Insights — runs Lighthouse plus field Core Web Vitals data.
Chrome DevTools device toolbar — emulate phone dimensions dan eyeball ini.
Bing’s Mobile Friendliness Test alat — Bing memeriksa viewport dan zoom-control configuration too, dan recommends yang sama tag Google melakukan.
View source / nyata-device periksa — sometimes fastest test adalah untuk hanya look di <head> pada Anda phone.

umum mistakes

No tag di semua (“viewport not set” (terjemahan) “viewport not set”) — halaman renders di legacy desktop-ish width dan shrinks.
sebuah hardcoded pixel width like width=1024 alih-alih device-width — sebuah tag exists, tetapi ini masih doesn’t match halaman untuk device. Lighthouse dan nyata mobile-friendliness both ingin sebuah usable width= nilai, not hanya apa pun tag.
initial-scale below 1 — dapat trigger legacy double-tap-zoom delay.
user-scalable=no / restrictive maximum-scale — copy-pasted dari old boilerplate; accessibility anti-pattern, ignored pada iOS anyway.

untuk where ini sits di broader mobile berfungsi — configuration, konten parity, speed — see mobile SEO hub, mobile SEO checklist, dan mobile-pertama pengindeksan. untuk tag itself sebagai bagian dari wider pada-halaman tag family, meta tags cluster adalah map.

AI summary

sebuah condensed take pada Advanced versi:

** viewport meta tag** — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints browser untuk size layout viewport untuk device’s width di CSS pixels alih-alih sebuah legacy ~980px fallback beberapa mobile browser gunakan. ini adalah what lets responsive CSS media kueri evaluate terhadap device’s nyata width pada mobile.
Without ini: beberapa mobile browser render halaman di itu wider fallback dan shrink ini — tiny text, horizontal scroll, breakpoints itu dapat not apply sebagai intended. Google: “Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down.” (terjemahan) “Without sebuah viewport meta tag, mobile devices render halaman di typical desktop screen widths dan lalu scale halaman down.”
Layout viewport vs. visual viewport: width=device-width sets layout viewport (what media kueri evaluate terhadap) dan acts sebagai sebuah minimum width; pinch-zoom perubahan visual viewport hanya.
Attributes: width, initial-scale, minimum-scale, maximum-scale, user-scalable, dan newer interactive-widget dan viewport-fit (both browser-layout edge cases, not SEO directives). gunakan width=device-width, initial-scale=1 dan nothing else.
tidak pernah disable zoom: user-scalable=no / sebuah maximum-scale below 2 fails W3C’s ACT aturan untuk zoom (b4f0c3) dan berfungsi terhadap WCAG’s resize intent — dan iOS 10+ overrides ini oleh default, so ini adalah sebuah accessibility downside dengan zero upside anywhere.
peringkat: Google documents hanya itu presence “indicates to Google that the page is mobile friendly” (terjemahan) “indicates untuk Google itu halaman adalah mobile friendly” — not itu tag adalah scored, dan not sebuah stated peringkat chain melalui usability signals (itu tautan adalah industry inference, not sebuah Google citation). Distinct dari pengindeksan mobile-pertama (which versi adalah terindeks, not how ini renders).
Testing changed: Search Console’s Mobile Usability report, Mobile-Friendly Test alat, dan -nya API adalah retired Dec 1, 2023 — gunakan Lighthouse, PageSpeed Insights, DevTools device toolbar, atau Bing’s Mobile Friendliness Test; layer di sebuah 200%-zoom periksa dan more daripada one browser.
umum mistakes: no tag, hardcoded width=1024, initial-scale < 1, copy-pasted user-scalable=no. Google dan Bing recommend identical nilai.

Official documentation

Primary-source documentation dan standards references.

Google

Meta tags dan attributes itu Google mendukung — lists viewport tag dan states -nya presence “indicates to Google that the page is mobile friendly.” (terjemahan) “indicates untuk Google itu halaman adalah mobile friendly.” saat ini, live source (Google’s dedicated older configure-viewport doc memiliki telah retired).
melakukan not memiliki sebuah <meta name="viewport"> tag dengan width atau initial-scale (Lighthouse) — audit definition, desktop-width-fallback explanation, dan recommended fix code.
What Viewport? — Chrome untuk Developers / web.dev pada legacy ~980px default dan layout vs. visual viewport.
role dari pengalaman halaman di membuat helpful konten (Apr 2023) — where Google announced Dec 1, 2023 retirement dari Mobile Usability report dan Mobile-Friendly Test alat/API, pointing untuk Lighthouse.

Standards / technical reference

<meta name="viewport"> (MDN Web Docs) — primary attribute-oleh-attribute reference: width, initial-scale, minimum-scale, maximum-scale, user-scalable, interactive-widget, viewport-fit, iOS 10+ override perilaku, dan WCAG accessibility warning.
MDN: Responsive design — viewport meta tag — plain statement itu breakpoints dan media kueri “may not work as intended” (terjemahan) “dapat not berfungsi sebagai intended” without tag.
MDN: CSS viewport concepts — qualifies ~980px fallback untuk “some mobile browsers,” (terjemahan) “beberapa mobile browser,” not sebuah universal default.
W3C WAI: ACT aturan “Meta viewport allows for zoom” (terjemahan) “Meta viewport allows untuk zoom” (b4f0c3) — precise accessibility conformance test: user-scalable=no dan maximum-scale di bawah 2 fail, dengan aturan’s own applicability dan assumptions spelled out.

Bing / Microsoft

Bing’s Mobile Friendliness Test alat (di Bing Webmaster alat) evaluates viewport dan zoom-control configuration, konten width, text readability, tap-target spacing, dan incompatible plug-ins, dan recommends yang sama width=device-width, initial-scale=1 nilai Google melakukan. (Bing help-doc URLs move periodically; periksa saat ini Bing Webmaster alat help center untuk live halaman.)

Quotes dari source

pada—record statements dari Google’s documentation dan MDN. setiap tautan jumps untuk quoted passage pada source halaman where sebuah deep tautan adalah available.

Google — what tag melakukan dan why

“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.” (terjemahan) “Without sebuah viewport meta tag, mobile devices render halaman di typical desktop screen widths dan lalu scale halaman down, membuat them difficult untuk read. Setting viewport meta tag lets Anda control width dan scaling dari viewport so itu ini adalah sized correctly pada semua devices.” — Lighthouse / Chrome untuk Developers (Google). Jump untuk quote
“Presence of this tag indicates to Google that the page is mobile friendly.” (terjemahan) “Presence dari ini tag indicates untuk Google itu halaman adalah mobile friendly.” — Meta tags dan attributes itu Google mendukung, Google Search Central docs. Read doc

MDN — accessibility warning

“Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content.” (terjemahan) “Disabling zooming capabilities oleh setting undefined untuk sebuah nilai dari undefined mencegah people experiencing rendah vision conditions dari menjadi able untuk read dan memahami halaman konten.” — MDN Web Docs. Read reference
pada user-scalable, minimum-scale, dan maximum-scale: “Browser settings can ignore this rule, and iOS10+ ignores it by default.” (terjemahan) “browser settings dapat ignore ini aturan, dan iOS10+ ignores ini oleh default.” Read reference

W3C — accessibility conformance test untuk zoom

Applicability: “This rule applies to each content attribute on a meta element with a name attribute value of viewport for which at least one of the following is true: the content attribute value has the user-scalable property; or the content attribute value has the maximum-scale property.” (terjemahan) “ini aturan applies untuk setiap undefined attribute pada sebuah undefined element dengan sebuah undefined attribute nilai dari undefined untuk which setidaknya one dari following adalah benar: undefined attribute nilai memiliki undefined property; atau undefined attribute nilai memiliki undefined property.” Expectation: attribute nilai harus not set user-scalable untuk no, dan harus not set maximum-scale below 2. — W3C WAI, ACT aturan “Meta viewport allows for zoom” (terjemahan) “Meta viewport allows untuk zoom” (b4f0c3). Read aturan

MDN — qualifying legacy fallback dan breakpoint perilaku

“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.” (terjemahan) “jika situs isn’t designed untuk berfungsi well pada kecil viewports dan ini tag adalah omitted, beberapa mobile browser render situs menggunakan sebuah 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.” (terjemahan) “Without ini, Anda responsive design dengan breakpoints dan media kueri dapat not berfungsi sebagai intended pada mobile browser.” — MDN, Responsive design guide. Read reference

Google — retiring mobile alat (Dec 2023) (via mesin pencari 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.” (terjemahan) “di nearly ten years since kami initially launched ini report, banyak lainnya robust resources untuk evaluating mobile usability memiliki emerged, including Lighthouse dari Chrome.” Read coverage

Note: Meta-tags doc dan MDN reference render fine, tetapi December 2023 alat-retirement statement adalah ditautkan melalui mesin pencari Land’s verbatim coverage dari Google’s announcement ( original adalah posted pada Google’s blog dan social channels); confirm terhadap live Google post sebelum treating ini sebagai akhir. Google Search Central meta-tags halaman adalah cited without sebuah text-fragment deep tautan because -nya konten memuat client-side.

Which viewport configuration seharusnya I gunakan?

untuk almost setiap situs jawaban adalah yang sama one line — tetapi people talk themselves ke “clever” (terjemahan) “clever” variants itu cause masalah. Click melalui untuk land pada right nilai (dan untuk aturan out anti-patterns).

Choosing your viewport meta tag value

Viewport tag checklist

sebuah quick pass untuk confirm tag adalah present dan sane:

Viewport meta tag — cheat sheet

** one line Anda ingin**

<meta name="viewport" content="width=device-width, initial-scale=1">

Google, Bing, dan Lighthouse semua recommend ini exact nilai.

Attribute reference

Directive	gunakan	Notes
`width`	`device-width`	atau 1–10000 px; gunakan `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; default `yes`)	`no` = fails zoom accessibility aturan; iOS 10+ overrides ini.
`interactive-widget`	(optional)	`resizes-visual` (default) / `resizes-content` / `overlays-content`.

Symptoms dari sebuah missing/broken tag

Tiny, unreadable text pada mobile.
Horizontal scrolling / pinch-untuk-zoom needed.
Responsive breakpoints not applying sebagai intended pada phones.
“Viewport not set” (terjemahan) “Viewport not set” di sebuah audit.

melakukan / Don’t

✅ width=device-width, initial-scale=1, tinggi di <head>.
❌ Hardcoded width=1024.
❌ initial-scale below 1.
❌ user-scalable=no / maximum-scale=1.

peringkat reality: not sebuah direct peringkat factor. Google documents hanya itu -nya presence indicates mobile-friendliness — usability→halaman-experience chain adalah industry inference, not sebuah Google-documented peringkat mechanism.

Test dengan: Lighthouse · PageSpeed Insights · Chrome DevTools device toolbar · Bing Mobile Friendliness Test. Not Mobile-Friendly Test atau Search Console Mobile Usability report — both retired Dec 1, 2023.

Viewport anti-patterns

four cara people get ini tag wrong, dan what untuk melakukan instead.

1. Disabling zoom (user-scalable=no / maximum-scale=1). intent adalah biasanya “stop pinch-zoom from breaking my layout.” (terjemahan) “stop pinch-zoom dari breaking my layout.” reality: ini fails W3C’s accessibility conformance aturan untuk zoom dan locks rendah-vision pengguna out dari scaling text, dan iOS 10+ overrides ini oleh default — so ini melakukan nothing pada sebuah huge share dari traffic while masih failing itu accessibility test pada browser itu melakukan honor ini. Fix: hapus ini entirely; pertahankan hanya width=device-width, initial-scale=1.

2. Hardcoding sebuah pixel width (width=1024). sebuah viewport tag exists, so audits sometimes half-pass, tetapi halaman adalah masih pinned untuk sebuah fixed width itu doesn’t match nyata devices. Fix: gunakan width=device-width.

3. initial-scale below 1 untuk “fit more on screen.” (terjemahan) “fit more pada screen.” Shrinking initial zoom dapat trigger legacy double-tap-untuk-zoom perilaku itu menambahkan interaction delay, dan ini membuat text smaller untuk everyone. Fix: initial-scale=1 dan let Anda responsive CSS handle layout.

4. Relying pada retired GSC Mobile Usability report untuk catch masalah. itu report, Mobile-Friendly Test alat, dan -nya API adalah retired December 1, 2023. jika Anda QA process masih says “check Mobile Usability,” (terjemahan) “periksa Mobile Usability,” ini adalah silently doing nothing. Fix: audit dengan Lighthouse / PageSpeed Insights instead.

Bonus — treating tag sebagai sebuah peringkat lever. ini adalah not one. menambahkan ini won’t lift rankings; ini hanya membuat halaman render correctly so ini dapat pass mobile-friendliness memeriksa itu melakukan feed pengalaman halaman. Set ini once, correctly, dan move pada.

periksa dan audit Anda viewport tag

cara untuk verify tag di seluruh sebuah halaman atau sebuah whole situs, dari sebuah quick console snippet untuk sebuah crawl.

DevTools console — inspect saat ini halaman’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-click periksa

javascript:(function(){var v=document.querySelector('meta[name=viewport]');alert(v?('viewport: '+v.content):'NO VIEWPORT TAG (viewport not set)');})();

Shell — fetch sebuah URL dan 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 halaman itu restrict zoom di seluruh sebuah list dari 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 di source (untuk sebuah code search / linter aturan)

<meta[^>]+name=["']?viewport["']?[^>]*>

untuk flag anti-pattern specifically, search untuk:

viewport[^>]*(user-scalable\s*=\s*no|maximum-scale\s*=\s*[01])

untuk sebuah whole-situs sweep, sebuah crawler (Screaming Frog, Ahrefs situs Audit) adalah faster daripada scripting — see alat tab.

alat untuk memeriksa viewport tag

Lighthouse (Chrome DevTools → Lighthouse, atau CLI) — direct replacement untuk retired Mobile-Friendly Test; runs viewport audit (“Optimize viewport for mobile” (terjemahan) “mengoptimalkan viewport untuk mobile” di Lighthouse 13+) plus rest dari mobile usability dan performa.
PageSpeed Insights — Lighthouse di browser, dengan field Core Web Vitals data alongside lab audit.
Chrome DevTools device toolbar — toggle device emulation dan eyeball halaman di phone dimensions; fastest cara untuk see sebuah broken viewport.
Bing Mobile Friendliness Test alat (Bing Webmaster alat) — memeriksa viewport dan zoom-control configuration dan recommends yang sama tag.
Screaming Frog SEO Spider / Ahrefs situs Audit — crawl whole situs dan surface halaman missing viewport tag (atau restricting zoom) di scale, alih-alih memeriksa URLs one di sebuah time.
View source pada Anda phone — lowest-tech periksa: adalah tag actually di <head> dari disajikan HTML?

Note retirements: Search Console’s Mobile Usability report, Mobile-Friendly Test alat, dan Mobile-Friendly Test API adalah semua retired pada December 1, 2023 — don’t reach untuk them.

viewport tag adalah present tetapi halaman masih looks desktop-sized

Symptom: source berisi sebuah viewport tag, yet phones tampilkan tiny text atau sebuah wide layout. mungkin cause: ada duplicate viewport tags, tag adalah injected too late, atau responsive CSS tidak pernah memuat. Fix: pertahankan one tag di server-rendered <head>, hapus conflicting copies, dan verify itu expected media kueri adalah applied di rendered halaman.

Mobile layout berfungsi di pertama dan lalu jumps wider

Symptom: initial layout fits, lalu horizontal scrolling appears setelah muat. mungkin cause: JavaScript menambahkan sebuah fixed-width widget, table, banner, atau iframe setelah viewport adalah established. Fix: inspect rendered DOM di moment overflow starts dan constrain injected element. Changing viewport nilai cannot repair sebuah element itu adalah intrinsically wider daripada screen.

Pinch zoom adalah blocked

Symptom: pengguna cannot zoom, bahkan though halaman otherwise fits. mungkin cause: user-scalable=no atau sebuah restrictive maximum-scale remains di viewport konten. Fix: hapus itu restrictions dan retest dengan browser zoom dan OS text scaling. melakukan not treat sebuah iOS override sebagai proof itu markup adalah accessible everywhere.

sebuah crawler reports tag missing tetapi browser menampilkan ini

Symptom: sebuah rendered browser sees tag, while sebuah raw-HTML crawler melakukan not. mungkin cause: client-side JavaScript inserts ini. Fix: emit tag di initial document head. sebuah foundational rendering instruction seharusnya not depend pada sebuah script running successfully.

Validate sebuah viewport-tag perubahan

Test untuk run	Expected hasil	Failure interpretation	Monitoring window	Rollback trigger
View initial HTML respons dan inspect `<head>`	Exactly one viewport tag berisi `width=device-width, initial-scale=1`	tag adalah missing, duplicated, atau dependent pada JavaScript	setiap template release	Roll back jika sebuah shared template menghapus atau duplicates tag
muat halaman di several phone widths di DevTools	CSS media kueri activate di intended widths dan konten fits	viewport adalah correct tetapi responsive CSS atau sebuah fixed-width child adalah broken	sebelum dan immediately setelah deployment	Roll back jika primary konten atau navigation becomes unusable
Run Lighthouse dengan sebuah mobile profile	viewport audit passes	disajikan atau rendered configuration masih mencegah sebuah mobile-sized layout	sebelum dan setelah perubahan	Roll back jika perubahan introduces lainnya tinggi-impact mobile failure
Test pinch zoom dan increased text size pada sebuah physical phone	pengguna dapat zoom dan text reflows without clipping	Scaling restrictions atau fixed-height components remain	Release day dan setelah design-sistem perubahan	Roll back jika essential controls cannot menjadi reached di enlarged text sizes
crawl sebuah sample dari setiap halaman template menggunakan raw HTML	setiap sample exposes yang sama valid tag di head	sebuah template atau rendering path memiliki inconsistent markup	setelah deployment dan di scheduled template QA	Roll back affected template jika halaman revert untuk legacy desktop viewport

Resources worth Anda time

My related writing

Beginner’s Guide untuk SEO teknis — where mobile rendering dan pengalaman halaman fit bigger technical picture.
Core Web Vitals: What mereka adalah & cara meningkatkan Yours — performa side dari mobile experience itu sits next untuk viewport tag.

My speaking

How Search berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat, including how Googlebot melakukan crawl dan renders sebagai sebuah smartphone. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.” (terjemahan) “ini adalah my understanding dari sistem… not going untuk menjadi 100% complete atau accurate.”)

dari sekitar industry

<meta name="viewport"> (MDN Web Docs) — precise attribute-oleh-attribute reference, iOS override perilaku, dan WCAG accessibility warning.
melakukan not memiliki sebuah <meta name="viewport"> tag dengan width atau initial-scale (Lighthouse) (Chrome untuk Developers) — audit definition, desktop-width-fallback explanation, dan recommended fix.
What Viewport? (Chrome untuk Developers) — legacy ~980px default dan layout vs. visual viewport, dijelaskan oleh Google.
Meta tags dan attributes itu Google mendukung (Google Search Central) — saat ini doc itu names viewport tag sebagai sebuah mobile-friendliness signal.
Google Officially Drops Mobile Usability Report, Mobile-Friendly Test alat dan API (mesin pencari Land) — December 2023 retirements dan Lighthouse recommendation.
Anda dapat stop menggunakan pengguna-scalable=no dan maximum-scale=1 di viewport meta tags now (Luke Plant) — background pada why restrictive zoom attributes existed dan why mereka’re obsolete dan overridden pada iOS.
sebuah Beginner’s Guide untuk Viewport Meta Tags (Semrush) — sebuah well-rounded competitor explainer covering interactive-widget, iOS 10 override, dan WCAG warning.

Test yourself: Viewport Meta Tag

Five quick pertanyaan pada viewport meta tag. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan

Diperbarui 18 Jul 2026.

Ringkasan editorial dan detail perubahan yang tercatat.

Detail perubahan

Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.

Perbandingan lengkap tidak tersedia — tidak ada cuplikan sebelumnya yang diarsipkan untuk revisi ini.

Panduan Viewport Meta Tag

What viewport meta tag adalah

mengapa ini penting

mistake untuk hindari

How ini fits rest dari mobile SEO

masalah ini solves: ~980px virtual viewport

Layout viewport vs. visual viewport (di bawah hood)

correct tag, dan where ini goes

Attribute reference

tidak pernah disable zoom: `user-scalable=no` adalah sebuah anti-pattern

adalah ini sebuah peringkat factor?

cara test ini — tooling changed di 2023

umum mistakes

AI summary

Official documentation

Quotes dari source

Which viewport configuration seharusnya I gunakan?

Viewport tag checklist

Viewport meta tag — cheat sheet

Viewport anti-patterns

periksa dan audit Anda viewport tag

alat untuk memeriksa viewport tag

viewport tag adalah present tetapi halaman masih looks desktop-sized

Mobile layout berfungsi di pertama dan lalu jumps wider

Pinch zoom adalah blocked

sebuah crawler reports tag missing tetapi browser menampilkan ini

Validate sebuah viewport-tag perubahan

Resources worth Anda time

Test yourself: Viewport Meta Tag

Log perubahan

Diperbarui 18 Jul 2026.

Detail perubahan

Add an expert note

Pin an expert quote

Panduan Viewport Meta Tag

What viewport meta tag adalah

mengapa ini penting

mistake untuk hindari

How ini fits rest dari mobile SEO

masalah ini solves: ~980px virtual viewport

Layout viewport vs. visual viewport (di bawah hood)

correct tag, dan where ini goes

Attribute reference

tidak pernah disable zoom: user-scalable=no adalah sebuah anti-pattern

adalah ini sebuah peringkat factor?

cara test ini — tooling changed di 2023

umum mistakes

AI summary

Official documentation

Quotes dari source

Which viewport configuration seharusnya I gunakan?

Viewport tag checklist

Viewport meta tag — cheat sheet

Viewport anti-patterns

periksa dan audit Anda viewport tag

alat untuk memeriksa viewport tag

viewport tag adalah present tetapi halaman masih looks desktop-sized

Mobile layout berfungsi di pertama dan lalu jumps wider

Pinch zoom adalah blocked

sebuah crawler reports tag missing tetapi browser menampilkan ini

Validate sebuah viewport-tag perubahan

Resources worth Anda time

Test yourself: Viewport Meta Tag

Log perubahan

Diperbarui 18 Jul 2026.

Detail perubahan

tidak pernah disable zoom: `user-scalable=no` adalah sebuah anti-pattern