Viewport Meta Tag Why responsive doesn't work on mobile

Have you run into the situation that a responsive web design is working on desktop but not on mobile device? And when you try to debug it, you will find the width of the page is always 980px, even you didn't define it. But when you change the browser window width to the size of mobile device, it works. Obviously, on desktop, the media queries you defined are triggered as you expected, but it didn't happens on mobile devices, because the width is wrong. You probably forgot to add the Viewport Meta Tag.

You need to add a meta tag to you HTML, called Viewport Meta Tag

  <meta name="viewport" content="width=device-width, initial-scale=1">

Many people learns responsive web design start from media query, actually the first thing to know and remember is Viewport Meta Tag, its a must for every responsive design.

What is viewport?

The viewport is an area that visible to the viewer, it can be a portion of a document. When you view a pdf with a pdf reader, the window is the viewport, when you zoom in the document, the font gets larger and the visible size of the document get smaller.

The same for mobile devices, almost every mobile browser are designed with the assumptions that all web pages are for desktop users. They will render the page with a predefined width, for iPhone its 980px. In most cases, the breakpoint of media query is less than 980px, so the responsive settings will not be triggered.

The viewport width is the width of mobile device, ranges from 320px to 425px, to squeeze the page to fit nicely inside this viewport so you can view the full width page, the mobile browser then has to zoom out the page. Everything become smaller in the same scale. It basically renders the page like a desktop browser and then zoom out the page. Its a bad experience for users.

Render a page in desktop way never gonna works, no matter whether zoom or not.

What the Viewport Meta Tag do to mobile browser?

By using a Viewport Meta Tag, you are telling the browsers that this page is optimized for mobile, please don't render it like a desktop page. The browser will set the width as the device width, for example, 320px, not 980px, and you breakpoint is triggered. All the settings designed for mobile device now take effect.

You can set the width to any number you wanted, for example 320px

  <meta name="viewport" content="width=320, initial-scale=1">

But for most cases, set to the device width is enough.

The "initial-scale=1" tells the browser not to zoom, because user don't have to zoom when the page is responsive.