What happens without the viewport meta tag?
Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.
This mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px, for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design technique.
What is the purpose of the viewport meta tag?
The viewport meta tag mitigates this problem of virtual viewport on narrow screen devices.
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.
Top comments (0)