Responsive Design Viewport Meta Tag

Viewport Meta Tag

What is the viewport?

Area on the computer or device screen where you are viewing a web page
Viewport width is not always the same thing as screen width
- For example: A person’s labtop may have a maximum screen width of 1280px, but likes to resize their web browser to 800px (viewport width)
On mobile devices viewport width is the same as screen width because mobile devices don’t allow you to change the size of your browser

Add the following to your element


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

inline

For example, the default width for iPhones is 980 pixels the browser is rendering the page as if the browser window was 980 pixels wide, but then shrinking it down to ⅓ of the size so that it fits on a screen that’s only 320 pixels wide

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
The browser is rendering the page so that the viewport width is the actual width of the device (i.e., at 100%)

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