Viewport in CSS3

How to control the web page's dimensions and scaling with ViewPort in CSS3?

Viewport

User's visible area of a webpage is called as 'Viewport' and it is a value to the name attribute inside the <meta> tag.

It varies with the device (Computer screen, Tablet, Mobile phone), we can test this by scaling the browser width on the computer screen. As the size of the browser decreases, the view of the page changes but the content remains same. That is clearly explained with in the Responsive Web Design.

Before days web pages are created only for computer screens with a fixed size, when tablets and mobile phones came into the exsistence we started surfing the internet using small screens (tablets & mobile phones).

Although the usage of viweport is not perfect, but it is a quick fix for scaling.

Setting the Viewport

We can set the <meta> viewport tag inside the <head> tag in the HTML page.

<!DOCTYPE html>
<html>
<head>
    <title>Viewport Setting</title>
    <meta name="viewport" content="width=device-width" initial-scale="1.0">
</head>
<body>
    This part is for writing the conten in the webpage's.
</body>
</html>

In that <meta> tag,

name="viewport"- Gives the instructions to the browser, how to contol the page's dimensions and scaling.

width="device-width"- Sets the width of the page, which will vary based upon the device.

initial-scale="1.0"- Sets the initial zoom level (when the page is first loaded by the browser).

 <h1>Page without viewport</h1>
 <img src="http://techfunda.com//HTPictures/Generics/5-635942140823078493.jpg" />
 <p>Teak wood is a type of hardwood. It is essentially sourced from the Tectona grandis tree species, which is native to south and southeast Asia, mainly India, Indonesia, Malaysia, Thailand and Burma. As a wood, teak has a smooth grain and texture. It has a yellowish brown hue, which may mature overtime to a silvery-grey finish. In fact, teak is famous for its high oil content, high tensile strength and tight grain. Sheesham is essentially a type of rosewood. It is sourced from the Dalbergia sissoo species of trees which is more commonly known as Indian Rosewood. It is commonly used for making furniture, especially cabinets. This is mainly due to the fact that the wood is highly durable and long lasting.</p>

Copy the above code and paste in HTML <body> tag and see the output by keeping <meta> viewport and without <meta> viewport.