Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Scale a Page Correctly for Small Viewports with a <meta> Tag

    Rory SmithRory Smith

    There is a certain <meta> tag we need to make use of in order to display content how we want on mobile devices. The tag is going to make sure page content scales in a way that suits small viewports.

    cssCSS
    htmlHTML 5
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Here in our index.html, we have an example page of Laura Ipsen text split into paragraphs. Let's go to iOS Safari and see how this looks. We can see that all of our text is really small and very difficult to read on a mobile device because of its small viewport. Let's switch over to Chrome on Android to see how that looks and we have a similar situation here. Luckily there's a solution to this.

    00:31 Let's go over to our code, specifically into our head tag. We're going to need a meta tag. We're going to target the viewport, we're going to give it name equals viewport. We're going to use the content attribute. This is going to be a string of settings. We're going to use width equals device width.

    00:54 Let's save this and head back over to iOS Safari. Let's refresh. Instantly the scale of our page is different because of the meta tag that we're using. Everything is a lot more easy to read now. Let's check it out on Android Chrome, and everything is slightly larger. The main difference though can be seen on Safari in our case, because we're comparing an iPhone 5s screen with a Nexus 5x screen. The 5x screen is significantly bigger.

    01:33 We can control the scale of our page on a mobile device using pinch zoom. If we pinch zoom on Safari, we can change the scale. As of Safari 10, we can't affect this with the meta tag that we're using. However, we can affect Chrome.

    01:53 Let's head back over back to our Android simulator. We'll pinch zoom to see that we can change the scale. Let's go back to our meta tag. In the content attribute, we'll pass in maximum scale equals one. Let's save and refresh.

    02:17 Now in Chrome when we pinch zoom, the scale isn't changed. It's worth bearing in mind that by doing this you may be affecting the level of accessibility on the page.

    Discuss

    Discuss