Today, technology is advancing at a very fast pace and mobile and tablet ready responsive website has become a demand of every user. Everyone wants to see a mobile friendly version of the site that they can easily browse and navigate. It is extremely imperative that you consider and talk about the mobile version of your website before the launch.
The following meta tag is used in the header section of the website which is the first step in making your web site responsive and to make it adjust automatically for any device or layout.
simply place the following viewport meta tag before the closing </head> section.
<meta name="viewport" content="width=device-width, user-scalable=false, initial-scale=1.0;"/>
The width property simply controls the width of the the viewport. Either you can enter a value in pixels or simply set it to “device-width” which is the width of the screen.
If you want users to zoom in and zoom out on the mobile screen, then you need to set the user-scalable=true. If you want to prevent users to zoom then set it to false.
Initial-scale value sets the zoom level of the site and content when the page is loaded for the first time. You can play with different scale levels to fit your need.
Lastly, you need the CSS style sheet to control the layout of your website for each device. CSS will determine the screen size and adjust the design and layout of the website automatically.