Flix: Setting the Viewport Meta Tag

Free Mobile & Responsive Web Design Tutorial

Dive into this detailed tutorial that covers the gamut of mobile and responsive web design, focusing on the crucial aspect of the viewport meta tag, utilizing the mobile website of Flix, a movie review platform, as a practical exercise.

This exercise is excerpted from Noble Desktop’s past web design training materials. We now teach Figma as the primary tool for web and UX & UI design. To learn current skills in web design, check out our Figma Bootcamp and graphic design classes in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

Topics covered in this Mobile & Responsive Web Design tutorial:

The viewport meta tag, device-width, initial-scale

Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

Exercise Preview

preview viewport meta tag

Photos courtesy of istockphoto, unizyne, Image #19302441, Marcello Bortolino, Image #17472015, Sergey Kashkin, Image #318828, Sveta Demidoff, Image #2712135, Chen Fu Soh, Image #3794598.

Exercise Overview

This is the first in a series of exercises where you’ll work on a mobile website for Flix, a movie review website. To save you time, we’ve already written most of the HTML and CSS for you, allowing us to focus each exercise on a specific topic. In this exercise, you’ll learn how to set the very important viewport meta tag.

Getting Started

  1. You will be working with images and pre-tagged HTML text we are supplying. Let’s take a look at the files. On the Desktop, go to Class Files > yourname-Mobile and Responsive Class and open the Flix Viewport folder.
  2. The folder contains:
    • A css folder with pre-coded styles.
    • An img folder with images.
    • An index.html page.
  3. Open index.html in Chrome. We will be using Chrome’s mobile emulator for this exercise. Briefly look over the page to get acquainted with the design.

The Viewport Meta Tag

  1. In Chrome, Ctrl–click (Mac) or Right–click (Windows) anywhere on the page and select Inspect to open Chrome’s DevTools.
  2. On the upper left of the DevTools panel, click the Toggle device toolbar button devtools device mode icon to open the mobile emulator.
  3. As shown below, above the webpage preview select a device such as the iPhone 5.

    device preview choose iphone

  4. Click the Reload button, or hit Cmd–R (Mac) or Ctrl–R (Windows).
  5. As you should see in the emulator (shown below), the content does not look optimized for a mobile device. It looks like a wide desktop page that has been scaled down to fit on a small mobile screen.

    flix tall not resized cropped

    Photos courtesy of istockphoto, unizyne, Image #19302441, Marcello Bortolino, Image #17472015, Sergey Kashkin, Image #318828, Sveta Demidoff, Image #2712135, Chen Fu Soh, Image #3794598.

    Mobile browsers employ a default width and scaling behavior. Small devices assume sites were designed for desktops. They render the site on a large viewport (980px) and scale it down to fit the smaller screen. We must use a viewport meta tag to tell it to render the page at the pixel width of the device, instead of the default 980px. This will prevent it from zooming out so far.

  6. Keep the browser open in emulation mode so we can come back to preview the changes we’re about to make.

  7. In your code editor open index.html from the Class Files > yourname-Mobile and Responsive Class > Flix Viewport folder.

  8. In the <head> tag, add the following bold code:

    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="">
       <title>Flix</title>
       <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    

    NOTE: Like other meta tags, this tag always goes in the head of the document. This meta tag is generally referred to as the viewport meta tag or simply viewport tag.

  9. The content attribute of the tag can take a few comma-separated key-value pairs for different settings. Add the following bold code:

    <meta name="viewport" content="width=device-width">
    

    This tells mobile browsers to set the viewport’s width to the width of the device.

  10. Save the file.

  11. Reload the page in Chrome, which should still be in device mode.

    The code we added won’t make any visual change to what you see in a desktop browser, only in a mobile browser which employs a default scaling behavior. As shown below, on the left is how the page used to look, and on the right we see that the width of the page is now set to the device’s width and looks correct!

    preview viewport meta tag

    Photos courtesy of istockphoto, unizyne, Image #19302441, Marcello Bortolino, Image #17472015, Sergey Kashkin, Image #318828, Sveta Demidoff, Image #2712135, Chen Fu Soh, Image #3794598.

  12. What happens when we rotate the device to landscape? In Chrome, above the webpage preview, click the Rotate rotate device mode button to change the orientation.

    That looks good. The portrait layout is recalculated to show more content in the wider, landscape preview.

  13. If you viewed the page on a device running iOS 8 or older, you would see that the layout remains the same but is scaled up to fill the wider screen, as shown below:

    preview orientation comparison before

    Photos courtesy of istockphoto, unizyne, Image #19302441, Marcello Bortolino, Image #17472015, Sergey Kashkin, Image #318828, Sveta Demidoff, Image #2712135, Chen Fu Soh, Image #3794598.

    Testing in the iOS Simulator

    If you want to see the issue mentioned above for yourself, you’ll need to have a Mac with the iOS Simulator installed (see Before You Begin at the beginning of the book for installation instructions). Remember, this only affects iOS 8 and older, so you will no longer see this in iOS 9. The iOS version will be listed in the title bar of the simulator window if you’re unsure what version it’s running.

    1. Launch iOS Simulator.

    2. Go to Hardware > Device (go into the iOS submenu if you have it) and choose any iPhone option.

    3. The iOS Simulator shows a Retina display. If this is too large to fit on your low-res screen, go to Window > Scale > 75% (or 50%, depending on the size of your screen).

    4. Drag index.html from the Finder onto the Simulator window to preview.

    5. In the Simulator app, choose Hardware > Rotate Right (or hit Cmd–Right Arrow) to show landscape view. Take note of how the layout is scaled up, making it difficult to see much of the page.
  14. Because the portrait layout is scaled to fit a wider landscape screen on iPhones running iOS 8 or older, you actually see less of the page. Most users would probably expect to see more of the page. We can control the initial scale of a page with a little more code that will fix this. Back in index.html, add the following bold code and don’t miss the comma!

    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    About Initial-Scale

    The initial-scale value represents a scaling ratio, so setting initial-scale=1 tells the browser to set the scale of the page to 100%, which is the same as not scaling the page at all. For example, 1.5 would set the zoom to 150%.

    Some mobile browsers, such as Opera Mobile, set initial-scale to 1 by default once you set the viewport meta tag width to device-width. As we mentioned with iOS Safari, however, the portrait width will also be used for the landscape orientation unless specified with initial-scale. We recommend setting initial-scale=1 for the most consistent results across devices.

  15. Save the file.
  16. If you reload the page in iOS 8 or older, it will show more content. (A bug in the iOS Simulator may show an incorrect preview of the landscape mode. Rotating back and forth between portrait and landscape should fix it.)

    After: Layout Now Shows More Content

    flix scaled

    Before: Layout Was Scaled Up

    flix not scaled

Disabling Zoom (Not Recommended)

It’s possible to disable page zooming, but just because we’re going to tell you how to do it, doesn’t mean you should! If type is not large enough, it can be hard to read for some people and they will not be able to enlarge it! Remember that not everyone has 20/20 vision. Unless you have a very good reason to disable it, you should leave it enabled. To disable zoom, add the following bold code, and don’t forget the comma!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

TIP: When previewing in Chrome’s Device Mode, you can try zooming in on the page using Shift–dragging up/down. (This won’t work now if you’ve disabled zoom.)

Why does this prevent scaling? When you set both maximum-scale and initial-scale to 1, the zoom starts at 1, and can’t go higher than 1. Therefore the scale remains fixed and users can’t zoom.

How to Learn Web Design

Master web design with hands-on training. Web design is the creative process of building functional, attractive websites with tools like HTML/CSS, JavaScript, WordPress, and Figma and an understanding of user interface (UI) design principles.

Yelp Facebook LinkedIn YouTube Twitter Instagram