Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The meta Viewport Declaration

5:00 with Anwar Montasir

Using CSS Media Queries, you can build a website that remains legible on a variety of viewports and device orientations. However, it’s critical that you let mobile browsers know your content is mobile-optimized. Otherwise, the browser will still zoom out, and your content will be difficult to read and interact with. Luckily, preventing mobile browsers from zooming out automatically is pretty simple. We’re going to add a meta viewport declaration to the head of every page of our website that’s mobile optimized.

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Most of you have probably experienced what it's like to view a web page on 0:00
    a phone that isn't optimized for mobile. 0:05
    The mobile browsers zooms out, so 0:09
    the width of the entire page content fits into the viewport. 0:11
    To actually read anything, the user has to pinch to zoom in, 0:16
    which is a generally frustrating experience. 0:20
    What you may have not known is that mobile browsers are programmed to do this 0:25
    automatically. 0:30
    When Apple launched the iPhone in 2007, 0:32
    most websites were not yet legible on mobile devices. 0:36
    So mobile browsers were built to zoom out on every page load. 0:41
    That way, content that isn't optimized for 0:45
    mobile could at least be accessed on a phone. 0:49
    A website designed at 960 pixels wide, 0:53
    would zoom out to 33% in order to fit on a 320 pixel phone screen. 0:57
    Using CSS media queries, you can build a website that remains 1:06
    legible on a variety of viewports and device orientations. 1:10
    However, it's critical that you let mobile browsers know 1:15
    your content is mobile optimized. 1:19
    Otherwise, the browser will still zoom out and 1:22
    your content will be difficult to read and interact with. 1:26
    Luckily, preventing mobile browsers from 1:30
    zooming out automatically is pretty simple. 1:33
    We're going to add a meta viewport declaration to the head of every 1:37
    page of our website that's mobile optimized. 1:42
    In the head of the index.html file containing Developer Diane's Blog post, 1:47
    let's add a new meta element. 1:53
    The first attribute will add name, 1:58
    lets the browser know what sort of meta element this is. 2:00
    It's a viewport declaration. 2:06
    The second attribute, 2:11
    content, instructs the browser on how to behave when displaying our content. 2:12
    The width property tells the browser that the width of my content should match 2:26
    the width of my device. 2:30
    So if the user has a viewport that's 320 pixels wide, 2:32
    my web content should be 320 pixels wide. 2:37
    The mobile browser should no longer expect the content to be wider 2:41
    than the actual viewport size. 2:46
    The initial-scale property says that the zoom level should initially be 100%. 2:50
    Don't zoom in or out when the page loads. 2:56
    The user can still pinch to zoom, if they want to view content details up close. 3:00
    But when the page initially loads, the browser will no longer zoom out. 3:06
    When we preview in the browser, however, it's hard to tell whether this is working. 3:15
    Our page looks just as it did before. 3:20
    To see our meta viewport in action, 3:23
    we need to make use of the device preview in our browser. 3:26
    Here in our browser's inspect panel. 3:31
    I'm going to click the icon for toggle device toolbar. 3:34
    I see a drop down containing a lot of famous names of mobile devices. 3:39
    Galaxy S5, iPad Pro, iPhone X. 3:44
    This rotation button is handy, 3:50
    if I want to switch my preview from portrait to landscape. 3:53
    And my text looks pretty legible in mobile view, according to this browser preview. 3:58
    Now, let's go back to our code and comment out the viewpoint declaration, 4:06
    and then return to the browser window and refresh. 4:11
    You might need to toggle your device toolbar off and 4:15
    on, to get an accurate preview. 4:19
    Some parts of the page are rather hard to see, aren't they? 4:22
    Our mobile browser no longer anticipates a mobile optimized experience. 4:27
    So we'll remove the comment. 4:34
    And now our mobile browser stopped zooming out. 4:38
    The meta viewport declaration belongs in every HTML page you create, 4:43
    which of course means, you'll need to develop mobile optimized content. 4:48
    And now you've learned a valuable browser tool for previewing your work. 4:55

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up