1
00:00:01,550 --> 00:00:03,260
Hello, everyone, and welcome back.

2
00:00:04,070 --> 00:00:06,560
In today's video, we will learn about Bubu.

3
00:00:07,560 --> 00:00:12,000
The viewport is part of the Web page that the user can get in D.C..

4
00:00:13,220 --> 00:00:19,210
This is often not the same size as the rendered page, in which case the browser provides scrollbar

5
00:00:19,280 --> 00:00:22,250
for the user to scroll around and access all the content.

6
00:00:23,080 --> 00:00:25,250
I've used this highlight to show that you bought.

7
00:00:26,290 --> 00:00:31,420
The horizontal length is the viewport with it is represented by VW.

8
00:00:32,500 --> 00:00:34,840
Which is a short form for me, would would, of course.

9
00:00:35,560 --> 00:00:42,730
So if you want to give an element in you board with, you can give it a value, say, with hundred VW.

10
00:00:43,860 --> 00:00:49,890
Or if you want to give it 40 percent of the viewport, what you could give it with 40 VW.

11
00:00:50,920 --> 00:00:54,320
Similarly, the vertical length is the viewport height.

12
00:00:55,120 --> 00:00:59,410
If you want to give an element, the entire viewport height, you can give it a value.

13
00:00:59,740 --> 00:01:01,600
Say hi, tumbleweed etch.

14
00:01:02,260 --> 00:01:05,030
So we bought height as represented by we each.

15
00:01:05,320 --> 00:01:11,200
So that's why height hundred be etch or if you want to give it, say, 70 percent of the viewport height.

16
00:01:11,350 --> 00:01:14,160
You can say height, seven edge.

17
00:01:15,090 --> 00:01:19,810
And that's how you use viewport to create elements with dynamic, with height.

18
00:01:20,590 --> 00:01:27,400
The viewport determines how content is the scale and size when it is rendered on different devices for

19
00:01:27,400 --> 00:01:27,970
this purpose.

20
00:01:28,000 --> 00:01:31,900
We have a viewport method to control the width and scaling of the pupil.

21
00:01:32,770 --> 00:01:37,640
Without this viewport method and mobile devices render pages a desktop screen with.

22
00:01:38,170 --> 00:01:41,140
And then scale down the page to fit mobile screen.

23
00:01:42,010 --> 00:01:43,230
Let me show you an example.

24
00:01:44,460 --> 00:01:48,240
So we have this red page and this is how it looks on the desktop screen.

25
00:01:48,870 --> 00:01:54,560
Let's try opening it on mobile screen, so let's just open it in a new dog.

26
00:01:55,320 --> 00:01:55,590
Right.

27
00:01:55,590 --> 00:02:00,090
Click, inspect and just click on this toggle device toolbar.

28
00:02:00,780 --> 00:02:02,130
So mine is already selected.

29
00:02:02,160 --> 00:02:05,760
So as you can see, it showing me a mobile screen.

30
00:02:06,810 --> 00:02:10,020
So I can change and select different screen sizes.

31
00:02:10,120 --> 00:02:17,850
Latimore, did you for Galaxy Note do or some iPhone visions or iPod and you can also create your costume

32
00:02:18,210 --> 00:02:22,020
screams so you can click on this edit button and just configure it.

33
00:02:22,310 --> 00:02:22,670
All right.

34
00:02:22,700 --> 00:02:25,590
Now, as you can see, this is how it's looking on them.

35
00:02:25,590 --> 00:02:26,280
Widescreen.

36
00:02:28,180 --> 00:02:30,070
So if you check the dimensions.

37
00:02:31,790 --> 00:02:34,190
The image with this full 55 pixels.

38
00:02:35,530 --> 00:02:38,140
The entire screen with this 414 pixel.

39
00:02:38,290 --> 00:02:39,400
So if you can see here.

40
00:02:40,300 --> 00:02:43,790
So this image is nowhere near 455 pixels.

41
00:02:44,530 --> 00:02:50,170
So as I mentioned earlier, what's happening here is it rendered the page as a desktop screen.

42
00:02:50,470 --> 00:02:53,680
And then just scaled it down to fit this mobile screen.

43
00:02:54,640 --> 00:02:58,300
So to avoid this scale down, we can use the viewport metadata.

44
00:02:59,080 --> 00:03:00,140
Let's give that a try.

45
00:03:01,320 --> 00:03:03,000
So let's bring about good idea to.

46
00:03:04,180 --> 00:03:05,950
So coming to the Extremophile.

47
00:03:07,670 --> 00:03:11,160
As we all know, we met our dogs inside the head dog.

48
00:03:12,460 --> 00:03:13,750
So let's order.

49
00:03:15,040 --> 00:03:20,850
This meant that I accept a property name and accepts a value viewport for that.

50
00:03:22,060 --> 00:03:24,340
It except and other property content.

51
00:03:26,040 --> 00:03:32,050
And inside this content redefined rules how to scale and sites are Web page content.

52
00:03:32,740 --> 00:03:34,270
So first one is with.

53
00:03:35,850 --> 00:03:37,620
So let's say a device with.

54
00:03:39,950 --> 00:03:47,180
So this statement with is a go to device with sex, the weight of the viewport to the width of the device.

55
00:03:47,750 --> 00:03:49,850
It accepts another rally scale.

56
00:03:50,600 --> 00:03:53,120
So this controls how the web page will be scaled.

57
00:03:53,140 --> 00:03:57,410
So to our back, we simply do comma an initial scheme.

58
00:04:00,450 --> 00:04:01,810
We can give it a rally one.

59
00:04:02,610 --> 00:04:05,160
This initial skill is equal to one six.

60
00:04:05,250 --> 00:04:08,640
The initial zun level when someone was at the beach.

61
00:04:09,390 --> 00:04:10,120
Let's save it.

62
00:04:11,700 --> 00:04:14,850
And as you can see, images are much bigger now.

63
00:04:15,450 --> 00:04:21,390
So right now, the width of the images, 455 pixels, but the width of the screen is full 14 pixels.

64
00:04:22,110 --> 00:04:24,420
So this extra part is overflowing.

65
00:04:24,450 --> 00:04:29,100
So if we change the width, let's say, in sort of four fifty five, let's say.

66
00:04:30,100 --> 00:04:32,020
350 pixels, let's save up.

67
00:04:33,530 --> 00:04:34,080
And now this.

68
00:04:34,250 --> 00:04:35,300
Inside the screen.

69
00:04:35,360 --> 00:04:37,400
So we've got one image in one room.

70
00:04:37,940 --> 00:04:44,890
And as you can see, if we want our Web page to be responsive, then this viewport metadata is a must.

71
00:04:45,880 --> 00:04:47,180
That's all for today, guys.

72
00:04:47,290 --> 00:04:49,450
If there is something that you did not understand.

73
00:04:49,960 --> 00:04:52,240
Feel free to drop a comment and we will discuss it.

74
00:04:52,990 --> 00:04:54,040
See you in the next video.

75
00:04:54,130 --> 00:04:54,430
Bye.

76
00:04:54,570 --> 00:04:55,240
And Jeff.