Ngôn ngữ

Hướng dẫn về Viewport Meta Tag

Điều gì đó viewport meta tag làm, vì sao điều này làm responsive design hoạt động on mobile, đó correct configuration, đó thuộc tính reference, và các lỗi thường gặp.

Xuất bản lần đầu: 2 thg 7, 2026 · Cập nhật lần cuối: 8 thg 8, 2026 · Advanced
Ngôn ngữ
AIĐược viết bởiAI v2

Đó viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints để đó trình duyệt để size đó layout viewport để đó device width trong CSS pixels thay vì một legacy ~980px fallback some mobile các trình duyệt dùng. Không có điều này, phones có thể render đó trang tại đó wider fallback và shrink điều này, producing tiny text, horizontal scroll, và responsive breakpoints đó có thể không apply as dự kiến. đây là không phải là yếu tố xếp hạng itself, nhưng của nó presence là một of đó điều Google documents as indicating mobile-friendliness, và của nó absence là một classic mobile usability failure. Không bao giờ force người dùng-scalable=không hoặc một restrictive maximum-quy mô — điều này fails đó W3C accessibility conformance rule cho zoom và có thể lock out thấp-vision người dùng, though các trình duyệt có thể override điều này (iOS 10+ bỏ qua điều này theo mặc định). Kiểm thử điều này với Lighthouse hoặc PageSpeed Insights: Search Console's Mobile Usability báo cáo và đó Mobile-Friendly Kiểm thử đã là retired December 1, 2023.

Tóm tắt — viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — hints trình duyệt để size layout viewport để device width trong CSS pixels thay vì legacy ~980px fallback some mobile các trình duyệt sử dụng, mà là Điều gì lets responsive CSS media các truy vấn evaluate so với device thực width on mobile. Bị thiếu hoặc misconfigured, nó kinh điển mobile usability thất bại (tiny text, horizontal scroll). nó là không xếp hạng factor — Google documents của nó presence as một điều của nó mobile-friendliness evaluation kiểm tra cho, và không nhiều hơn đó. không bao giờ force user-scalable=no / restrictive maximum-scale: nó fails W3C ACT accessibility rule cho zoom, though trình duyệt overrides exist (iOS 10+ bỏ qua nó theo mặc định). Google và Bing khuyến nghị giống hệt tag. Kiểm thử với Lighthouse / PageSpeed Insights — Search Console’s Mobile Usability báo cáo và Mobile-Friendly Kiểm thử là 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

vấn đề nó solves: ~980px virtual viewport

Để understand đó tag bạn có để understand điều gì đây là overriding. Khi mobile các trình duyệt đã là new, đó lack of một viewport tag meant some of them sẽ fall lại để một fixed layout width of khoảng 980px và render tại đó size — một deliberate accommodation so desktop-sized, pre-responsive các trang sẽ không completely break on sớm smartphones. Đó trình duyệt thì scaled đó kết quả xuống để đó physical screen. MDN’s own cách diễn đạt: “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.” (bản dịch) «Nếu đó site không designed để hoạt động well on nhỏ viewports và này tag là omitted, some mobile các trình duyệt render đó site dùng một fixed ban đầu containing block width, typically 980px.» — đây là một trình duyệt-cụ thể fallback, không một universal spec constant.

Đó consequence, trong Google 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.” (bản dịch) «Không có một viewport meta tag, mobile devices render các trang tại typical desktop screen widths và thì quy mô đó các trang xuống, đang làm them difficult để đọc.» Bạn nhận unreadable text, forced pinch-zooming, và horizontal scrolling — đó textbook symptoms of một trang flagged “not mobile-friendly.” (bản dịch) «không mobile-friendly.»

Setting đó tag “lets you control the width and scaling of the viewport so that it’s sized correctly on all devices.” (bản dịch) «cho phép bạn control đó width và scaling of đó viewport so đó đây là sized correctly on all devices.»

Layout viewport so với. visual viewport (dưới hood)

Hai “viewports” là trong play, và nó worth giữ them straight:

  • layout viewport là area trang lays out vào và đó fixed-position elements attach để. width=device-width sets điều này để device screen width trong CSS pixels.
  • visual viewport là Điều gì người dùng là hiện tại looking tại — mà thay đổi Khi họ pinch-zoom. Zooming thay đổi visual viewport không có thay đổi layout viewport.

Đó reason này matters cho SEO và CSS: của bạn responsive media các truy vấn (@media (max-width: 600px) và friends) là evaluated so với đó layout viewport. Nếu đó layout viewport là stuck tại một legacy ~980px fallback vì có không viewport tag, một phone có thể match của bạn desktop breakpoints thay vì của bạn hẹp ones. MDN diễn đạt điều này plainly: “Without it, your responsive design with breakpoints and media queries may not work as intended on mobile browsers.” (bản dịch) «Không có điều này, của bạn responsive design với breakpoints và media các truy vấn có thể không hoạt động as dự kiến on mobile các trình duyệt.» Đó tag là điều gì làm device-width đó layout viewport so của bạn dự kiến breakpoints evaluate correctly.

Evidence for this claim Without an appropriate viewport hint, narrow responsive breakpoints may not match as intended against the wider virtual layout viewport; it is too absolute to say CSS media queries never fire. Scope: production HTML and HTTP responses Confidence: high · Verified: Responsive web design

đúng tag, và nơi nó goes

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

Put nó cao trong <head>, near charset, trước khi nội dung-phụ thuộc tags. Đây là giá trị Google, Bing, và Lighthouse all khuyến nghị — verbatim, nó khắc phục Lighthouse itself suggests. không overthink giá trị: width=device-width, initial-scale=1 là câu trả lời cho essentially mỗi responsive trang web.

Thuộc tính reference

content thuộc tính là comma-separated list của directives. MDN là canonical thuộc tính-by-thuộc tính reference; ở đây Điều gì mỗi một làm:

DirectiveĐiều gì nó làmNotes
widthControls (minimum) pixel width của viewporttoàn bộ number 1–10000, hoặc special giá trị device-width ( screen width trong CSS pixels). sử dụng device-width.
initial-scalezoom ratio giữa device width và viewport on loadnumber 0.0–10.0. sử dụng 1.
minimum-scaleminimum zoom cấp độ được phépphải là ≤ maximum-scale. iOS 10+ bỏ qua nó theo mặc định.
maximum-scalemaximum zoom-trong được phépphải là ≥ minimum-scale. iOS 10+ bỏ qua nó theo mặc định. không restrict nó.
user-scalableLiệu người dùng có thể zoom (yes/no, default yes)iOS 10+ bỏ qua nó theo mặc định. Setting no là accessibility anti-pattern — leave nó.
interactive-widgetCách interactive UI (e.g. virtual keyboards) ảnh hưởng viewportCác giá trị: resizes-visual (default), resizes-content, overlays-content. Newer; phần lớn SEO nội dung omits nó.
viewport-fitCách viewport xử lý display cutouts (notches)Các giá trị: auto (default), contain (fits bên trong largest rectangle đó tránh cutout), cover (fills display — pair với CSS env() safe-area-inset variables so nội dung không land dưới cutout).

viewport-fit và interactive-widget là cả hai trình duyệt-layout các trường hợp biên — display-cutout và virtual-keyboard xử lý, respectively — không SEO directives; phần lớn SEO-focused các hướng dẫn skip them hoàn toàn.

nhỏ nhưng thực gotcha từ Lighthouse own tài liệu: setting initial-scale dưới 1 có thể trigger legacy double-tap-để-zoom behavior đó adds interaction delay — một reason để stick với initial-scale=1 thay vì getting clever.

không bao giờ disable zoom: user-scalable=no là anti-pattern

bạn’ll vẫn tìm user-scalable=no (hoặc maximum-scale=1) copy-pasted vào old theme boilerplate, thường từ nhà phát triển ai đã không muốn pinch-zoom “messing lên” của họ layout. nó sai on hai được tính:

  1. Điều này fails đó web own accessibility conformance kiểm thử cho zoom, và điều này hoạt động so với WCAG intent. Đó W3C ACT rule “Meta viewport allows for zoom” (bản dịch) «Meta viewport cho phép cho zoom» (rule b4f0c3) áp dụng để bất kỳ viewport tag đó sets user-scalable hoặc maximum-scale, và của nó expectation là rõ ràng: đó tag không được set user-scalable=no, và maximum-scale không được là set dưới 2. (Đó rule carries stated assumptions — điều này không apply nếu đó trang có không visible nội dung, offers một sản phẩm khác way để resize text, hoặc không bao giờ cần để reflow past một 320×256 CSS-pixel area — nhưng một typical responsive trang không đáp ứng những exceptions.) Theo 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.” (bản dịch) «Disabling zooming capabilities by setting để một giá trị of ngăn mọi người experiencing thấp vision conditions từ đang able để đọc và understand trang nội dung. Additionally, WCAG requires một minimum of 2× scaling; tuy nhiên, đó best practice là để enable một 5× zoom.» Blocking zoom locks out đó chính xác người dùng ai cần điều này hầu hết.
  2. đây là cũng trình duyệt-cụ thể, không universal. iOS Safari 10 và sau đó bỏ qua user-scalable=no và restrictive maximum-scale theo mặc định — đó là an iOS override, không một thay đổi để đó ACT rule hoặc để WCAG intent. So on một lớn share of mobile traffic đó setting accomplishes không có gì, trong khi on các trình duyệt đó làm vẫn honor điều này (older Android WebViews, some trong-app các trình duyệt) điều này actively fails đó accessibility kiểm thử trên. Zero upside, real downside — và không treat “iOS ignores it” (bản dịch) «iOS bỏ qua điều này» as proof đó markup là accessible mọi nơi.
Evidence for this claim `user-scalable=no` and `maximum-scale` below 2 fail the cited ACT rule's expectation under its assumptions, and disabling zoom harms low-vision users; an automated ACT failure is not by itself a complete universal WCAG conformance determination. Scope: production HTML and HTTP responses Confidence: high · Verified: Viewport meta tag

rule là đơn giản: không touch zoom. width=device-width, initial-scale=1 và không có gì khác.

là nó xếp hạng factor?

là precise ở đây, vì lot của SEO nội dung overstates nó. Ở đây chính xác Điều gì Google documents, và nơi line để ngành inference sits.

Điều gì Google documents: đó viewport tag là không một trực tiếp xếp hạng factor. Google own supported-meta-tags doc says plainly đó “presence of this tag indicates to Google that the page is mobile friendly” (bản dịch) «presence of này tag indicates để Google đó trang là mobile friendly» — đó là đó toàn bộ được ghi lại claim: presence các tín hiệu mobile-friendliness. Google không document đó tag as scored, as một kết xuất bảo đảm, hoặc as proof một trang responsive design là thực ra 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

nơi practitioners connect dots (ngành inference, không Google citation): bị thiếu hoặc misconfigured viewport tag là phổ biến root nguyên nhân của mobile-usability failures (tiny text, horizontal scroll, unusable tap targets) đó SEOs generally understand để degrade mobile trang experience. đó connection là reasonable và widely held trong ngành, nhưng nó practitioner inference về Vì sao tag matters — không điều gì đó tài liệu củ Google state as xếp hạng chain.

So honest cách diễn đạt: tag itself không phải scored, và khắc phục nó vì trang không có nó renders badly on phones — không vì Google documents nó as xếp hạng lever, trực tiếp hoặc gián tiếp. giữ điều này tách biệt từ mobile-đầu tiên lập chỉ mục cũng: đó distinct Google Search concept về mà version của bạn trang Google primarily dùng cho lập chỉ mục và xếp hạng; viewport tag là về Cách đó mobile HTML renders trong trình duyệt, đầy đủ dừng.

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

Cách kiểm thử nó — tooling changed trong 2023

Này là nơi hầu hết older các hướng dẫn là stale. On December 1, 2023, Google retired Search Console’s Mobile Usability báo cáo, đó Mobile-Friendly Kiểm thử tool, và đó Mobile-Friendly Kiểm thử API (announced April 2023, confirmed hoàn tất đó December). Google reasoning đã là đó other tools đã có matured — “many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” (bản dịch) «nhiều other robust các tài nguyên cho evaluating mobile usability có emerged, including Lighthouse từ Chrome.» So nếu một tutorial tells bạn để open Search Console → Mobile Usability để kiểm tra của bạn viewport, đó báo cáo không lâu hơn tồn tại.

Layer những điều này kiểm tra thay vì relying on một tool: xác nhận tag tồn tại trong thô phân phối HTML (không chỉ sau khi JavaScript chạy), xác nhận của bạn responsive breakpoints thực ra apply tại phone widths, kiểm thử zooming để 200% không có layout breaking ( resize behavior WCAG intent là được xây dựng khoảng), và spot-kiểm tra trong nhiều hơn một trình duyệt — iOS Safari-chỉ kiểm tra có thể hide zoom-restriction bug đó Android hoặc trong-app các trình duyệt vẫn enforce.

của bạn hiện tại toolkit:

  • Lighthouse (trong Chrome DevTools). Đó relevant audit trong lịch sử đọc “Does not have a <meta name="viewport"> tag with width or initial-scale” (bản dịch) «Không có một tag với hoặc» — điều này fails trừ khi đó <head> có một meta name="viewport" whose content bao gồm width=. As of Lighthouse 13 đây là folded vào đó “Optimize viewport for mobile” (bản dịch) «Optimize viewport cho mobile» insight.
  • PageSpeed Insights — chạy Lighthouse plus trường Core Web Vitals dữ liệu.
  • Chrome DevTools device toolbar — emulate phone dimensions và eyeball điều này.
  • Bing Mobile Friendliness Kiểm thử Tool — Bing kiểm tra viewport và zoom-control configuration cũng, và khuyến nghị đó giống nhau tag Google làm.
  • View nguồn / real-device kiểm tra — sometimes đó fastest kiểm thử là để chỉ look tại đó <head> on của bạn phone.

phổ biến mistakes

  • Không tag tại all (“viewport not set” (bản dịch) «viewport không set») — đó trang renders tại đó legacy desktop-ish width và shrinks.
  • MỘT hardcoded pixel width như width=1024 thay vì device-width — một tag tồn tại, nhưng điều này vẫn không match đó trang để đó device. Lighthouse và real mobile-friendliness cả hai muốn một usable width= giá trị, không chỉ bất kỳ tag.
  • initial-scale dưới 1 — có thể trigger đó legacy double-tap-zoom delay.
  • user-scalable=no / restrictive maximum-scale — copy-pasted từ old boilerplate; accessibility anti-pattern, đã bỏ qua on iOS anyway.

cho nơi điều này sits trong rộng hơn mobile hoạt động — configuration, nội dung parity, speed — see mobile SEO hub, mobile SEO checklist, và mobile-đầu tiên lập chỉ mục. cho tag itself as part của wider on-trang tag family, meta tags cluster là map.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.