This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Viewport" Lesson
[00:00:02]
>> Estelle Weyl: So let's talk about viewport a little bit. So viewport, you saw there was a ms-viewport, and I said, I don't know why I put it in this slide. Well, basically this here,
>> Estelle Weyl: Viewport really is a CSS feature, which is, what is the size of this window, and how should I display it?
[00:00:20] But viewport is so important, to necessary it should be by default in all your HTML files. All of your HTML files should start with the meta tag of viewport and say width equals device-width. And that's all you need to say, but always include it. Do not use user-scalable no.
[00:00:44] Do not use max-zoom one or min-zoom one, or whatever that feature is. Maximum scale one, and minimum scale one. What does that do? Anyone can take a guess or hover over this? It makes it not scalable. What happens when a website is not scalable? I can't read it, cuz I actually do wear reading glasses, except for I don't wear reading glasses, I don't bring them with me anywhere, and so I can't read if I can't zoom.
[00:01:13] The only time you should ever use maximum and minimum scalable of one is if you are doing a game on a touch device. Because you don't want them to accidentally zoom in or zoom out when they're touching something. Same reason that the only time to use the tap highlights to get rid of the selection, is a video game.
[00:01:36] Because you don't want someone to accidentally zoom in and have half the game off of the screen, cuz then they can't play. But that is the only time ever. Google Gmail, in the browser, has zoom disabled. I cannot read my e-mail on my mobile device because they disabled, too.
[00:01:53] And they also have eight or nine different seat selection icons. They really need more diverse people on their staff. So we have, in terms of this viewport right here, in terms of the viewport tag meta tag, we have width, height, initial-scale, maximum-scale, minimum-scale, and user-scalable, which is basically all self-evident.
[00:02:16] In terms of the viewport, @viewport, we have min-width, max-width, width max, min-height, max-height, height, zoom, min-zoom, max, and they're basically the exact same features.
>> Estelle Weyl: Where was I? Here, so here, it says media screen, max-width is 400 ms-viewport. The reason that we had put viewport earlier in was that, it was in the wrong slide.
[00:02:44] But it's basically only Microsoft supported the viewport. And I'm not sure if other browsers are going to. It's been discussed. I don't know if it's been implemented.
>> Estelle Weyl: So here it says, if meta is set to disable zoom, there is no delay on touch devices on the onClick events, which makes it sound awesome, right?
[00:03:04] But if meta is set to disable zoom, you're a jerk. So which one is more important, not being a jerk? So it makes sense on the video game that the click device, the event handler, if you can't zoom then it clicks right away because normally, it's waiting for the double tap to see if you wanna zoom in or not.
[00:03:23] If it's a video game, you don't want the double tap. You don't want the zoom. You can get rid of it, otherwise, make sure you include it. What I was saying in terms of touching, the tap highlight color, the user selective none, the touch-callout, none. These are the things I talked about during the talk about selecting text.
[00:03:51] Here it is again because it's very important, ms touch-action none. These are all to prevent accidental OS things during a game, no reason to use it otherwise.
>> Estelle Weyl: So use cases of these media queries. So here I have media screen and min-width is 38ems. So anything that's 38ems or bigger, content put it as 21%.
[00:04:25]
>> Estelle Weyl: Because there's a different way of doing this, which is basically just saying make the paragraph a max-width of whatever I want it to be a max-width of. So here let's open this up and play. Yes, I do wanna leave. Okay, so here I have 21%, right?
>> Estelle Weyl: If I shrink it,
[00:04:51]
>> Estelle Weyl: At least I get like so, on a small device, I don't wanna have huge padding on both sides, right? On a larger device, I wanna lot of white space. So here, I still have five pixels of padding on either side, but if it's a really big screen, I can have a nice large column down the middle.
[00:05:14] This is much more legible than if I did padding zero. Those lines are not legible, right? 21% was nice, right, but I could also do,
>> Estelle Weyl: Paragraph, max-width 54ems, and maybe make that smaller, 44ems, margin, right? That's a different way of doing it without media queries. So media queries are useful, we can always think of ways to do it without media queries.
[00:05:58] So this is one scenario where media query ways might be useful.