Check out a free preview of the full Progressive Web Applications and Offline course:
The "Viewport Metatag" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Through adding meta tags to web applications, Mike shows how to define web applications to appear more like a native app.

Get Unlimited Access Now

Transcript from the "Viewport Metatag" Lesson

[00:00:00]
>> Mike: So when we start simulating with these virtual devices, we're going to be able to start seeing how we can make our web application seem more native app like. And this comes by way of adding extra metadata to our app, little metatags and links and we'll talk about something called the webap manifest.

[00:00:22] But now that we have a means of running our code on something that simulates these devices, we'll start to see that new kind of look-and-feel improvements start to pop up when we run the device in those simulated modes. The first one, and let me also say the current state of the project, as if someone has paid absolutely no attention to mob experience, right?

[00:00:52] So the first thing we need to worry about is making the view port look reasonable. And my favorite memory of why this is important has to do with the original iPhone launch. Where Steve Jobs pulls out the iPhone and he's so excited. There's a desktop class web browser in this thing.

[00:01:11] And he fires up the New York Times and it's five columns wide with print that's so tiny you can't even see it. And the big feature that he was showing off was he can double tap on a column and it will smartly zoom in to a page. And then you can double tap again and it'll zoom out.

[00:01:25] This is a crappy way to experience the web. It's almost like microfiche. I'm aging myself a little bit here. You could get little copies of newspapers on little tiny film images and you had to zoom way in to see what was going on there. We don't want to make that our user's experience.

[00:01:47] They will leave us and go find someone else that has done a better job. So here, with this meta tag, we can set the view port size so that it is in alignment with what users expect from native apps. We'll see a bunch of metatags here, but we'll call this the viewport one.

[00:02:05] You'll see this common convention as we've got a name attribute and a content attribute. Think of this as key value pair. Viewport has this value, the string for content here. And we can specify comma separated options here that help us define what the initial size of the viewport is, and whether the user can pinch to resize things.

[00:02:30] And my advice here is to go for a native app like experience, you cannot open the Twitter native app and zoom in on the Twitter logo in the address bar. There's certain, maybe on an image you can zoom in, but the vast majority of it, it's sort of fixed in size.

[00:02:46] So that would be this last option here. User scalable? No, but this is a good starting point here. I might add user scalable to the end of this for many apps. And you can see that we have device width as an available value. So the browser will detect that, and it will know that the device is this wide.

[00:03:08] And it will sort of put that in instead of having to specify the number there.