Hello, everyone, and welcome back.
In today's video, we will learn about Bubu.
The viewport is part of the Web page that the user can get in D.C..
This is often not the same size as the rendered page, in which case the browser provides scrollbar
for the user to scroll around and access all the content.
I've used this highlight to show that you bought.
The horizontal length is the viewport with it is represented by VW.
Which is a short form for me, would would, of course.
So if you want to give an element in you board with, you can give it a value, say, with hundred VW.
Or if you want to give it 40 percent of the viewport, what you could give it with 40 VW.
Similarly, the vertical length is the viewport height.
If you want to give an element, the entire viewport height, you can give it a value.
Say hi, tumbleweed etch.
So we bought height as represented by we each.
So that's why height hundred be etch or if you want to give it, say, 70 percent of the viewport height.
You can say height, seven edge.
And that's how you use viewport to create elements with dynamic, with height.
The viewport determines how content is the scale and size when it is rendered on different devices for
this purpose.
We have a viewport method to control the width and scaling of the pupil.
Without this viewport method and mobile devices render pages a desktop screen with.
And then scale down the page to fit mobile screen.
Let me show you an example.
So we have this red page and this is how it looks on the desktop screen.
Let's try opening it on mobile screen, so let's just open it in a new dog.
Right.
Click, inspect and just click on this toggle device toolbar.
So mine is already selected.
So as you can see, it showing me a mobile screen.
So I can change and select different screen sizes.
Latimore, did you for Galaxy Note do or some iPhone visions or iPod and you can also create your costume
screams so you can click on this edit button and just configure it.
All right.
Now, as you can see, this is how it's looking on them.
Widescreen.
So if you check the dimensions.
The image with this full 55 pixels.
The entire screen with this 414 pixel.
So if you can see here.
So this image is nowhere near 455 pixels.
So as I mentioned earlier, what's happening here is it rendered the page as a desktop screen.
And then just scaled it down to fit this mobile screen.
So to avoid this scale down, we can use the viewport metadata.
Let's give that a try.
So let's bring about good idea to.
So coming to the Extremophile.
As we all know, we met our dogs inside the head dog.
So let's order.
This meant that I accept a property name and accepts a value viewport for that.
It except and other property content.
And inside this content redefined rules how to scale and sites are Web page content.
So first one is with.
So let's say a device with.
So this statement with is a go to device with sex, the weight of the viewport to the width of the device.
It accepts another rally scale.
So this controls how the web page will be scaled.
So to our back, we simply do comma an initial scheme.
We can give it a rally one.
This initial skill is equal to one six.
The initial zun level when someone was at the beach.
Let's save it.
And as you can see, images are much bigger now.
So right now, the width of the images, 455 pixels, but the width of the screen is full 14 pixels.
So this extra part is overflowing.
So if we change the width, let's say, in sort of four fifty five, let's say.
350 pixels, let's save up.
And now this.
Inside the screen.
So we've got one image in one room.
And as you can see, if we want our Web page to be responsive, then this viewport metadata is a must.
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And Jeff.