The view Port meta tag is used to work your website on both mobile device and computer screen perfectly. If you design the web page for both computer and mobile device. If you see the web page on the computer that same site, you can see the in the mobile device without any miss alignment. You can use the media query css to view the site in the mobile perfectly. But you can write the media query css code for your site after that you add this meta tag in the header part of the your web page then only your media query work in your devices.
The Default View Port Meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
This is not necessary in Fennec; when the device changes orientation, Fennec updates the viewport size, the page layout, and JavaScript/CSS properties like device-width, based on its new window dimensions.
Via: Dev Moz
