Setting the View port [ Introduction to Responsive Layout ]

Setting the View Port

Welcome back to another lesson on responsive layout.

In this lesson I would like to tell you about the very first step of creating a responsive website layout

and that step is setting the view port and we can do that by adding this line so clearly it’s a matter


And we know that we can add a mad tag inside the head tag and it’s dismal.

But before we get into that let me first explain what exactly does this mean.

So this man attack has the name of your board because it is about setting the view port with an important

attribute content with an important property of it set to device correct.

So this word which is said to device it tells the browser that the root of the website is equal to the

device where the user is on beta mobile phone or a tablet or a desktop website.

Therefore the website will adapt to the screen size.

The user is on rather than becoming a squeezed tiny little desktop version.

And then comes the role of initial scale which is another property that we have set.

And the initial scaled value that we have said is 1.0 which means that one view port pixels should be

equal to one see us as pixels.

And this initial scale we can set it to two three four up to 10 and a value of two will set the view port

pixels twice three times four times and so on up to ten times and 1.0 is the general value because that’s

quite sufficient.

Setting the View Port

And it loads of upside pretty well.

So this is why we add this matter tag and that’s the very first step of making the Web site responsive

so let me also show you what exactly do I mean.

But before that let me first tell you about a very interesting two that we have on all the browsers

and we can have access to that tool by going to the developer tools option and we have that shot good

control shift tonight.

Or like right click on the mouse.

And then I can click on this inspect option and as usual we what we get is this view.

We have the Web site on the left and on the right we have to estimate file and the CSS file with all

the properties mentioned.

But here we have on the top a tiny little icon for responsive layout and when I click on that icon I

get a view like this.

This is basically a tool that we have online that is provided by the Web browsers.

And here I am on Chrome browser but you can have access to it on any other browser that you are on.

And then on top of it we have various different options as we can see here.

We have the by default the option set to responsive and then we have the dimensions.

The first one is the wait and second one is the height and then we have the zoom level as well as the

option to choose online off line and things like that so the important option is this responsive end

of it and height because this will so as an important reference when we are trying to understand the

different screen sizes and under this responsive option we get various other mobile phone models as

we can see of a.

Of course we don’t have all the mobile models and it’s a very short list but that’s the whole idea of

using the first option which is responsive.

I’ll come to that but let me just select any other phone option like I can select this iPhone 5 which

has a relatively smaller screen.

And here we can see that now we have a screen size set to this much and this is how the website is looking

when it’s seen on an iPhone 5 as well as any of the five version they all have similar screens if I

want to set a manual screen size that I can choose responsive overshare or I can modify the dimensions

over here and then I can just use this option to actually reduce or increase the screen size.

And clearly we are using the version one because that’s the one that is getting completely distorted.

So here we can see that when I reduce the screen size let me first.

So I have commented out this mad attack that I added earlier.

And here you can see that this is the version that we see.

So it’s basically the desktop version that is scaled down or you can say we have zoomed out of it to

be able to showcase the same whole Web site inset within the screen size.

If I reduce the screen size it will also reduce but we are still seeing a desktop version but when I

add this line back and then if I refreshed and the website is now going to adapt to the weight of the


So if I refresh and here we can see that the website now believes that this is the work that it has

and this much is the height that is has and now we can see a slightly improved version of the website

which is which is responding to the screen sizes.

We can just change the screen sizes and it will adapt accordingly.

So that’s the very first step.

Of course the website is still not organized because it’s not as easy as that.

But it’s not hard either.

And likewise we can see the same thing over here as well.

I can go to inspect and here I have this Web site version which is a responsive version here also the

very first app that we did was at the Mad attack advert an ignition scale property

so that’s the first step of creating a responsive layout in the next lesson.

We are going to learn about the media queries that do all the magic.

So keep learning and see you in the next lesson.

Leave a Reply

Your email address will not be published. Required fields are marked *