This is something I have wanted to talk about for a while now; I don’t even go through this subject (at the moment) in my growing HTML course – although I do point it out in the Bootstrap section.
So; before we talk about viewport let us go back in time; back to when viewing the internet was done only on a computer and not on so many other devices. Why? Well, i’ve kind of illuded to it in the sentence above ‘when viewing the internet was done only on a computer’. There in lies the essense.
We knew that any webpage we would create would be viewed on a computer and we knew the best minimum screen resolution so we could create a page at these static sizes. The webpage would look great on any system and it was a winner.
However, moving through time we started viewing webpages on other devices; devices such as tablet computers and mobile phones. Systems that had a much smaller viewing space. That meant that these wanderful webpages that we create and look excellent on computers; well, looked rather crap on a much smaller device..
So, much sweat and toll (I presume) was put into answers. Things such as WAP (better left forgotten) were created and left behind – after all; we want an integrated virtual world and not segregated by device. So, along came Viewport..
The viewport is the user’s visible area of the webpage. Now, this will vary from device to device; a tablet (for example) will have a larger viewport than a mobile phone. So, the viewport sets the width of the page to follow the screen-width of the device giving your viewing device the full picture so to speak.
Its very simple to add to your webpages and is the essense of creating a responsive web design and page. We simple add it with a <meta> tag :
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
Width=device-width sets the width of the page to follow the screen-width of the device (so this will varey from device to device).
initial-scale=1.0 sets the initial zoom level when the page is loaded.
By simply adding viewport to your webpage you will make your page better for mobile viewers..
So, what is viewport? Its a meta tag that allows you to design and create a mobile responsive webpage.