Viewport Meta Tag
Viewport Meta Tag
Add the following to your
element- This enables use of media queries for cross-device layouts.
<meta name="viewport" content="width=device-width, initial-scale=1">
More info on the viewport meta tag
What happens if you don’t set the viewport?
The example above depicts a website being viewed on a legacy iPhone (320 pixels wide)
Because the viewport meta tag was not set the mobile browser will automatically assume you want to see the “entire” page on your smaller screen. As a result it will automatically zoom out to a point where everything is visible.
This results in a suboptimal reading experience
Width
Tells the browser how to scale the web page
For a responsive site, the value width=device-width tells the browser to render the page at full size, whatever the size may be
Best practice is to use width=device-width
Initial-Scale
Tells the browser how to scale the web page when it’s first loaded on the screen (i.e., the zoom factor)
initial-scale=1 means that the page will be rendered at the size determined by the width attribute, and will not be zoomed in or out
If you use a number larger than 1, then the page will be zoomed to that level
- For example, an initial-scale=2 value would mean that the page would be zoomed to be twice as large as actual size, so you would only see half of the page on the screen
initial-scale value only determines the size of the web page when it’s first loaded on the screen. Remember that your mobile device also gives users the ability to zoom in and out
Best practice is to use initial-scale=1