Responsive Web Design Tutorial #4 – The Viewport Tag

yo the hell’s going on people welcome to your fourth responsive intend seminar and in this video we’re going to take a look at the viewport meta call Wow alright then so in the last lesson I demonstrated you that the default viewport width of browsers on a lot of portable inventions is quite wide it’s wider than the device itself for example about 980 pixels okay but the device itself is only what about 320 or 400 pixels wide so when we view a website in a portable browser which has a large viewport that viewport takes all the content at that width say nanogen 8 pixels and squashes it into this thicknes right here 320 pixels which is why we get this impact this kind of squashed web site okay that is the default behavior of portable browsers and their viewport width now we also witnessed that if we invalidate the viewport diameter by using this meta viewport tag then we can say to the mobile look we want the viewport to be this weak so everything isn’t squashed okay and we set the viewport thicknes equal to the device width itself so that’s what we’re going to take a look at today all right then guys so as you can see I’ve gone ahead and made a simple index dot HTML file right here in brackets that’s the journalist I’m consuming and it’s just a HTML tag with a honcho and a figure then we’ve got this H one right here and we’re going to introduced the viewport meta tag right up there in the ability ok so the first thing we need to do is say meta retain a meta label is just a way of including additional information to a web page such as the description or keywords or in this case information about the viewport alright so the figure of this meta tag equals viewport and then we’re going to specify a few different belongings on ethics if you like within the content attribute like that ok so all the different values go within here the content and the first thing I want to do is equip a extent of the viewport that I want this web page to be viewed in ok so I’m going to overrule the default width of those mobile browsers so material equals width that’s the asset reputation and then we say equals and what we could do here is framed a static cost like 320 pixels something like that and that would build the viewport 320 pixels wide nonetheles that would be fine on a invention which is 320 pixels wide but not fine on a invention which is like 480 pixels wide so they’re going to differ so we need to weigh to prepare the viewport the thicknes of the invention that it’s being contemplated on and we can do that we can just placed wick equal to device – width and then no matter what the extent of the device is when it comes across this viewport meta tag it’s going to set the viewport equal to that maneuver so if the device is 320 pixels so on the viewport width if the device is 480 pixels wide so are likely to be the viewport extent all right so that’s pretty cool now that’s almost all we need to do but I’m going to go through only a marry more things I’m going to framed a comma because we’re going to do another ethic right here and this next value is going to be initial scale now you don’t really need to do this because most mobile browsers come with a initial proportion of 1 anyway okay but I’m just going to set it equivalent to 1 and mostly that’s like the zoom statu so 1 is no zoom at all ok if you wanted it twice as large-hearted you could set it to that responds to like a 100% zoom right or you could go to below 0 whatever you want to do oops sorry below 1 okay I’m going to set it equal to 1 and then show you another couple of things we can say maximum scale and likewise minimum scale so maximum magnitude equals 1 so that mostly means that I’m not countenancing a user ever to zoom in all right now I don’t like doing things like that I time generally like leaving this at the most okay ordinarily I don’t even lean this in sometimes I just leave it like that okay because this is the thing I want to control so that is the viewport meta tag and it’s important that we introduced this in the is chairman of all of our projects that we’re making accept so that we can override that default viewport thicknes on a browser so that everything isn’t squashed and that nature when we go to change our CSS and adapted it for mobile it’s going to look compensate where reference is look it all right so if you have any questions whatsoever feel free to leave a comment down below otherwise guys don’t forget to subscribe share and like and I’ll see you in the very next video

As found on YouTube

Share this article

Leave a comment

Related Posts