RWD Viewport
On this page
RWD Viewport
Mobile browsers need a viewport rule to render responsive layouts correctly. Without it, the browser may assume a wider “desktop” viewport and scale the page down, making text and layout look tiny.
The Viewport Meta Tag
Add this inside the <head> of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-widthsets the layout viewport to the device width.initial-scale=1.0sets the initial zoom level.
Common Viewport Options
In most documentation sites, the basic version above is enough. Sometimes you may see extra options:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Tip: Be careful with maximum-scale and user-scalable=no. Disabling zoom can harm accessibility.
Summary
- Viewport configuration is required for proper mobile responsive rendering.
- Use
width=device-width, initial-scale=1.0in most cases. - Avoid disabling zoom for accessibility reasons.
Basic Viewport Meta Tag