44. Module Wrap up - Responsive CSS Tutorial

so this is a really important note before you move on or before you graduate from scrim by air you start doing things on your own and that is we have a viewport meta tag and I didn't include it in the lessons of this module when we take a look in the browser window or on our desktop computer and we play with the width it works really well but this doesn't fully simulate how a phone will render a page so the best-case scenario is actually testing out the sites you're doing on your actual phone or multiple phones on an iPad on their Android tablet whatever it is we want to actually test across different devices the reason we have this viewport meta tag we're going to see in a second but mobile devices what they started doing is to prevent problems in how the page was rendered when sites are not optimized for mobile devices and small screens they would render a zoomed out version of the page and then they'd shrink it down to fit inside the viewport of their mobile device so they all every device has its sort of default size so you might be on a phone like an iPhone that has a width of 360 pixels but what they're gonna do is they're actually gonna bring in the version they're telling the browser that it's 960 and it's gonna take the version of your site as if it was at 960 pixels wide and it's gonna shrink the whole thing down and it's made me super zoomed out it's gonna look like your desktop site but really really small even if you did all the hard work of building your media queries and doing everything you wanted to make it responsive so to prevent it from doing this on our pages which we've optimized for small screens with their media queries we need to add a meta tag to the head of our document there are a lot of different attributes that we can add but the basic meta tag that you'll use will look something like this or will look exactly like this really and this can be added anywhere in the head of our document this will make sure that the page actually loads properly on mobile devices which after all the hard work we really wanted to do so once you've graduated from here on scrim BA and you're working on your own pages and you're testing them in different devices remember to include this in your head I can go anywhere up here I already have a meta tag for that I'm gonna go right after that and paste it in right there so what this is doing is it's saying that it's a meta tag is always referencing different things we haven't really looked at meta tags but it's referencing like different stuff you have a description of the site you can have the author of the site so if we say that name equals author content is equal to Kevin Powell for this individual page of my website I've said that the author of this page was Kevin Powell I know the browser knows that there are other ones that you may use along the way as well but in this case we're leaning the viewport ones we're saying that this meta tag is related to your viewport and the first one here is the really important one what this is doing is it's saying the width is actually the device width so this is where I said that mobile devices would simulate being a larger device and then shrink everything down so it would say no I'm actually a device that's a 960 pixels and then it would take that and shrink that whole thing down this is saying nope the width isn't what you're telling me it is it's the actual device width and the initial scale you don't I don't think really really need it but it's pretty standard to have it in there and it's just setting the initial zoom level when the page is first loaded so you could actually have it zoomed in more or less but I think that'd be really really awkward so you generally want it just to be zoomed to 100% or at like the default 1.0 type of thing to have it not scaled when the page is loaded so once you've done here on screen BA and you're making your own web pages please please remember always to be including this in here because the browser window on your computer is not the same as on your phone or on your tablet so you want to test across different devices and most importantly if you don't want things to look really zoomed out make sure every single page that you create has this meta tag right here