This next lesson in the Responsive Design Fundamentals course on lynda.com is going to be separated into three parts, beginning with exploring multiple mobile viewports and understanding how they effect the design process.
So we’ll start by examining the mobile viewport and how we can control how the content displays on mobile screens. Unfortunately, the example given in the lynda.com videos uses an iPhone 3GS despite technology currently being on iPhone 7. But the concept still applies, so we’ll stick with the 3GS with a screen resolution of 320 x 480 pixels (meaning that the screen is 320 px wide when in portrait mode).
When browsing on a desktop device, the concept of the viewport becomes a little more obvious, as any open browser window is defined as the viewport. Because the viewport is independent of the screen, we can resize it to whatever size we want. On mobile devices, the viewport functions in much the same way. It gives you a defined area to display web pages that is independent of the device’s screen. It’s simply not as obvious as the desktop viewport, and users don’t actually resize the viewport as much as they scale it up or down when they zoom in and out of webpages.
Since viewports have a minimum scaling factor, users rarely ever see their edges as they do when they resize floating browser windows. Because of the small size of mobile screens, mobile viewports are designed to be larger than the screen’s resolution. Mobile Safari has a viewport of 980 px, while Opera’s is around 850. When you compare that to an iPhone with a screen width of 320 px, you can see that the viewport is much larger than the actual screen itself.
In large part, this is due to mobile viewports having to display content that’s designed for much wider screens. Typically, mobile browsers will display a web page within the viewport and then shrink that viewport down until the content fits within the width of the screen itself.
If mobile browsers didn’t behave this way, you’d only be able to see a small portion of most web pages.
This would be much more confusing as you’d have to pan around the page to explore its content without really knowing where anything was. This is described as “keyhole browsing”, because it’s similar to viewing an entire room through small keyhole.
Let’s say that you’ve created a responsive design that has a mobile phone layout designed for 320 px. On an iPhone, the default mobile viewport is 980 px, so your 320-px layout is only going to occupy about a third of that. The viewport will then be scaled down to fit the 320-px screen, making your layout really tiny and defeating your carefully crafted 320-px layout.
So, in order to build responsive sites that neatly within mobile screen sizes, you’ll need to know how to control both he viewport size and its initial scale factor.
Currently, there are two mechanisms for overriding the user agent’s default viewport. You can either use the viewport meta tag or the @viewport CSS rule. Since they both use similar syntax, below are code examples for each, and I’ll give a brief description of their effects on the viewport.
The meta viewport tag appears in the head of your HTML, and has tow basic parts: name (which is viewport) and content (which will contain the properties and values you wish to set for the viewport itself).
The @viewport rule can appear anywhere in you CSS that yo want, but since it can effect media queries, it’s recommended that you place it prior to any media queries in your styles. Most designers place it near the top of their styles as one of, if not the very first, rule. The syntax is similar to the meta viewport tag. You simply declare an @viewport rule and the populate it with the properties that you wish to control.
It is also important to note that in the viewport meta tag syntax, you don’t append “px” to the pixel value, while in the @viewport CSS syntax you do.
While a specific pixel value for width might be fine for some projects, remember that not all mobile screens are 320 pixels wide. If your website is using a fluid layout, you’re going to want the layout to be based on the available screen width of the device and not limit the viewport to just one single size. To do that, we can use the property value “device-width.”
This value instructs the browser to se the viewport to the exact size as the available screen pixels. Setting this will remove any initial viewport scaling and allows you to create fluid layouts that adapt to multiple devices. Unless there’s a reason to use a specific value for your viewports, this is the value recommended to responsive designs.
Just as you can set the width, you can also set the height in the same way. However, this probably won’t be needed all that often but it’s available if needed.
You can also set the initial scale value for the property’s content as well. Initial scale controls the zoom factor of your content of the initial view of the page. Once the page has been viewed, the user is then free to scale the page at any factor they want. This is separate of the viewport width.
So above, if the initial scale is set to 2, for example, notice that the content is now scaled up to 200% even though the width of the viewport remains unchanged. Setting initial scale to “1” ensures that the content appears at 100%, regardless of viewport width.
It’s common to see people set width to “device-width” and then also set initial scale to “1”, but in reality that’s not really necessary. If you set the viewport width to “device-width”, the browser automatically sets initial scale to 100%. In fact, on iOS devices, there’s a bug with initial scale that affects pages when the orientation changes, so many people advise leaving initial scale off entirely unless you need to set the value to something other than 100%.
In terms of syntax, notice that you use an integer to set the scaling factor and that meta viewport tags use the initial scale property, while @viewport uses zoom.
The @viewport syntax currently also allows a percentage value as well, but since that may change in the future, you’re safer just using a number.
You can also control the range of scaling allowed by your site as well. Let’s say you want to allow people to zoom in and out on your page content, but you do want to control just how much zooming they can do. By using the minimum and maximum scale properties, you can do just that.
In terms of syntax, there is a little bit of difference between the meta viewport tag and the @viewport syntax. In the meta viewport tag, you’ll use the minimum and maximum scale properties and a positive numeric value, which indicates the scaling factor. In the @viewport syntax, you’ll use the minimum and maximum zoom properties, and can use either a positive number or a percentage value.
If you wish, you can turn scaling off by using the user-scalable property. This allows you to either enable or disable user’s ability to zoom in and out on your page content, and i more commonly used for applications rather than websites. For the meta tag syntax, you’l use “user-scalable” and values of either “yes” or “no”. As for @viewport, you’ll use the “user-zoom” property which will accept either the “zoom” or “fixed” values.
Keep in mind that users are accustomed to having the ability to zoom in and out of web content. If you disable this for your site, you should have a clear reason to do so.