Initial-scale, Minimum-scale, Maximum-scale and user-scalable, What are these terms in responsive design?

Term used in meta of responsive Web Page

1.  meta: It gives the instructions to the browser for controlling the page's dimensions and scaling.
2. viewport: Viewport is the visible area of a web page to the user. Viewport varies according to the device ie. mobile phone <  tablets < computer (Mobile devices has less viewport size compare to tablets and computer)
3.  width: This is the width of viewport of the device.(virtual)
4.  height: This is the width of viewport of the device.(virtual)
5.  device-width: This is the width of device's screen.(Physical)
6.  device-height: This is the width of device's screen.(Physical)
7.  initial-scale: It is used in meta information of a html page for initial zooming of a page means zoom level when the webpage is first loaded by the web browser.
8.  minimum-scale: It defines the minimum value of zooming of Web Page.
9.  maximum-scale: It define maximum zoom. When you access website top priority is maximum-scale=1 won’t allow the user to zoom.
10.  user-scalable: User-scalable has some value or no zoom. User-scalable assign 2.0 means website allow to zoom in or zoom out. user-scalable:no means user is not allowed to zoom in or out a Web Page. It has boolean values and default is yes.

These are  for controlling aspect on mobile phones, tablets and multimedia devices that supports to display Web Pages.


Here is the example for all above terms

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">