Determining the available viewport for use

Viewport? Surely you mean screen estate or perhaps resolution? In this instance, no. When designing responsively, we have to cater to screens of all different shapes and sizes; it's not enough to simply design for a certain screen resolution. Instead, we have to allow for the fact that the available space in a browser window (or viewport) might be smaller; we have to design our breakpoints to fit this available space.

A good reference point to see the available viewport on a host of devices is http://viewportsizes.com/ and then navigating to http://viewportsizes.com/mine/. This will display the current space available to us. There are two ways to set the available viewport for use: one using CSS/HTML markup and the other using jQuery or JavaScript. We'll take a look at using the CSS method first.

Using CSS to set our viewport

This is probably one of the simplest settings to add to any responsive design, yet it has the potential to open up a hornet's nest of problems! Setting the viewport using CSS is a one-line piece of code; the difficulty is in working out the CSS styling needed to position the elements correctly once the viewport has been set.

Tip

For this demo, it is recommended that you use Google Chrome. It has a built-in device emulation facility that makes it easy to test our results in different viewports. I will assume for the purposes of this demo that you have it installed.

We'll begin with setting the markup first, so we can at least see what happens when the viewport has not been set in CSS:

We'll start, as always, by preparing our markup. From the code download, extract the files: viewport-css.html, viewport-css.css, and pixel-grid.png; save them into the css subfolder and img subfolder respectively.
We've used the PT Sans font for decorative purposes. This is available from http://www.fontsquirrel.com/fonts/PT-Sans; you will need to download it and extract the fonts into a fonts subfolder within your project area.
Open Google Chrome and set the Emulation facility to emulate the Sony Xperia S, Ion devices, within the Developer Toolbar.

At this point, it is worth previewing the results in a browser; if all is well, we should see a result similar to this screenshot:

The keen-eyed among you will have noticed that something is clearly amiss. Our screen has not resized properly and text is being chopped off the right edge of the window. Let's fix that now using the following steps:

In viewport-css.html, add the following line as indicated:

  <title>Demo - Setting a viewport using CSS</title>
  <meta name="viewport" content="width=360">
  <link href="css/viewport-css.css" rel="stylesheet">

Resave the file and then refresh the screen in Chrome. If all is well, we can now see the results of our change with the text correctly sized and no overlap:

In this example, we've used <meta name="viewport" content="width=360">, which sets a very specific width of 360 px. For a more general setting where no specific width is used <meta name="viewport" content="width=device-width, initial-scale=1"> can be set instead.

When using media queries, we can always set the size of elements within our query. It's worth setting the viewport too so that items don't disappear off the page when resizing the browser window.

Note

For a good discussion on using the viewport meta tag, it is worth checking out an article by Paul Underwood, which is available at http://www.paulund.co.uk/understanding-the-viewport-meta-tag.

Getting the viewport using JavaScript

The alternative to using the CSS <meta viewport> tag is to use JavaScript (or we could equally use jQuery). In this instance, we can work out what the values are and use these as a basis for our design, rather than simply set specific sizes as we did in the previous example.

Let's dig in and take a look to see how we can get our sizes:

We'll begin with adding the following markup to a new file, saving it as viewport-js.html in the root of our project folder:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Demo - What's my Viewport Size?</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="css/viewport-js.css">
</head>
<body>
  <div id="c">
  <p>Your viewport size:</p>
  <p id="ua"></p>
  </div>
  <div id="vp"><span id="w"></span><span id="h"></span></div>
  <script src="js/viewport-js.js"></script>
</body>
</html>

Next, add this JavaScript to a new file, saving it as viewport-js.js in the js subfolder in the project folder:

(function() {
  if (typeof(document.documentElement.clientWidth) != 'undefined') {
    var $w = document.getElementById('w'),
          $h = document.getElementById('h'),
       $ua = document.getElementById('ua');
  $w.innerHTML = document.documentElement.clientWidth;
  $h.innerHTML = ' &times; ' + document.documentElement.clientHeight;
  window.onresize = function(event) {
    $w.innerHTML = document.documentElement.clientWidth;
    $h.innerHTML = ' &times; ' + document.documentElement.clientHeight;
  };
    $ua.innerHTML = navigator.userAgent;
  }
})();

We need some basic styling, so go ahead and add the following to viewport-js.css, saving it to the css subfolder in our project folder:
```
html, body { border: 0; margin: 0; padding: 0; font-family: 'Helvetica',courier new; font-weight: bold; }
#vp { background: #e00; color: #fff; font-size: 3.125em; line-height: normal; padding: 3px; text-align: center; }
#h { color: #ff8080; }
#c { font-size: 1.25em; line-height: 1.5em; padding: 0 1em; }
```
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
If we preview the results in a browser, we'll see the size of our available viewport area displayed along with the current user agent string being used by our browser, as shown in this screenshot:

There are plenty of good examples online to show us how to determine the available viewport area; we've used a modified version of one produced by Matt Stow at http://viewportsizes.com/. In it, he also has an extensive list of viewport sizes for a variety of devices. We could of course use something like Modernizr to perform the same function, but this is at the expense of depending on an outside solution; our example here is written in vanilla JavaScript, removing any dependencies and keeping the code concise.

Responsive Media in HTML5

By : Alex Libby

Responsive Media in HTML5

By: Alex Libby

Overview of this book

Determining the available viewport for use

Using CSS to set our viewport

Tip

Note

Getting the viewport using JavaScript

Tip

Responsive Media in HTML5

By : Alex Libby

Responsive Media in HTML5

By: Alex Libby

Overview of this book

Determining the available viewport for use

Using CSS to set our viewport

Tip

Note

Getting the viewport using JavaScript

Tip

Create a Note

Delete Bookmark

Delete Note

Edit Note

Confirmation

Buy this book with your credits?