--- id: css-rwd-viewport title: "CSS RWD Viewport" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["viewport meta tag", "responsive viewport", "device-width", "RWD viewport", "viewport scaling"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.89 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["css", "web", "frontend", "w3schools", "responsive", "viewport"] raw_sources: ["https://www.w3schools.com/css/css_rwd_viewport.asp"] applied_in: [] github_commit: "" --- # [[CSS RWD Viewport]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) The viewport is the user's visible area of a web page, and adding a single `` tag tells the browser to match the page width to the device and set the initial zoom so content fits without horizontal scrolling. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **Viewport definition** β€” the viewport is the user's visible area of a web page, and it varies with the device (smaller on a phone than on a computer screen). [S1] - **The viewport meta tag** β€” to give the browser instructions on how to control the page's dimensions and scaling, every web page should include the viewport `` tag. [S1] - **`width=device-width`** β€” sets the width of the page to follow the screen-width of the device. [S1] - **`initial-scale=1.0`** β€” sets the initial zoom level when the page is first loaded by the browser. [S1] - **No horizontal scrolling** β€” users are used to scrolling websites vertically but not horizontally; forcing horizontal scrolling or zoom-out degrades the experience. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Standard responsive header line** β€” placing the viewport meta tag in the `` of every page is the baseline step for responsive web design. [S1] - **Size content to the viewport** β€” keep elements fluid rather than fixed-width so they never exceed the device's visible area. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **What is The Viewport?** The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. [S1] **Setting The Viewport** To give the browser instructions on how to control the page's dimensions and scaling, you should include the following `` viewport element in all your web pages: [S1] ```html ``` This gives the browser instructions on how to control the page's dimensions and scaling. The `width=device-width` part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The `initial-scale=1.0` part sets the initial zoom level when the page is first loaded by the browser. [S1] The page demonstrates the visual difference between a page without the viewport meta tag and a page with it. **Tip:** If you are browsing this page with a phone or a tablet, you can click on the two links above to see the difference. (Those comparison demos are links/images only β€” no inline code.) [S1] **Size Content to The Viewport** Users are used to scroll websites vertically both on desktop and mobile devices - but not horizontally! So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience. Some additional rules to follow: [S1] 1. **Do NOT use large fixed-width elements** β€” For example, if an image has a width wider than the viewport, it causes the viewport to scroll horizontally. [S1] 2. **Do NOT let the content rely on a particular width to render well** β€” Since screen dimensions vary widely between devices, content should not rely on a particular viewport width to render well. [S1] 3. **Use CSS media queries to apply different styling for small and large screens** β€” Setting large absolute CSS widths for page elements will cause the elements to be too wide for smaller devices. Instead, consider using relative width values, such as `width: 100%`. [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) The meta viewport tag above is the page's own applied example β€” the one line W3Schools instructs to place in all web pages. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) The viewport meta tag (language: HTML): ```html ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.89 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[CSS Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[CSS RWD Grid View]], [[CSS RWD Media Queries]], [[CSS RWD Images]] - **μ°Έμ‘° λ§₯락:** The first technical step in responsive web design, referenced before media queries and fluid grids are applied. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” CSS RWD Viewport β€” https://www.w3schools.com/css/css_rwd_viewport.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "CSS RWD Viewport" page (Astra wiki-curation, P-Reinforce v3.1 format).