About Viewport Meta Tag
The viewport meta tag controls how a webpage is displayed on mobile devices. It's essential for responsive web design.
Common directives:
- width=device-width: Sets the width of the viewport to the width of the device
- initial-scale=1.0: Sets the initial zoom level when the page is first loaded
- minimum-scale, maximum-scale: Controls how much the user can zoom in/out
- user-scalable=no: Prevents the user from zooming (not recommended for accessibility)
- shrink-to-fit=no: Prevents iOS 9+ from shrinking content to fit the viewport
Best practices:
- Always include
width=device-width, initial-scale=1.0as a minimum - Avoid disabling zoom unless absolutely necessary (accessibility concern)
- Test your site on actual mobile devices after implementation
- Combine with responsive CSS techniques (media queries, flexible layouts)