The viewport meta tag tells the browser how to control the page's dimensions and scaling on mobile devices. A missing or incorrect viewport tag is one of the most common mobile usability issues.
Before responsive design, mobile browsers simulated a desktop-width viewport (980px by default) and scaled the page down to fit the screen. Users had to pinch-zoom to read content. The viewport meta tag overrides this behaviour.
The standard viewport tag is: <meta name="viewport" content="width=device-width, initial-scale=1.0">. This sets the viewport width to the device's actual width and sets the initial zoom level to 1.0.
The width=device-width instruction is the most important part. Without it, the browser reverts to the 980px default and scales the page down, making text tiny.
Missing viewport tag � The browser falls back to 980px width. Text appears tiny. Users must pinch-zoom to read.
User-scalable=no � Disabling zoom violates accessibility guidelines. Users with visual impairments need the ability to zoom. Never disable zoom.
Maximum-scale=1.0 � Same problem as user-scalable=no. Prevents zooming. Do not use.
Fixed viewport widths � Setting a specific pixel width like width=1024 defeats the purpose and breaks layouts on smaller screens.
Our free audit covers security, SEO, performance, mobile, design, and content.
Get your free audit