Drupal Viewport Dimensions Using WindowSize


This article was published in the print magazine Drupal Watchdog, Volume 2 Issue 1, 2012-03, on page 8, by Tag1 Publishing. The magazine was distributed at Drupalcon Denver, 2012-03-19. The article was also published on their website.

When creating or testing a Drupal theme, you may wish to know the current width and height of the browser viewport — especially when working on a responsive theme, for which it is critical to see the various break points of the window width as the browser is resized.

The WindowSize module can be quite helpful, by adding a small window at the top left corner of your web browser, in which is displayed the current window dimensions, dynamically recalculated with each browser size adjustment.

WindowSize in action
Figure 1. WindowSize in action

In the screenshot, the viewport has a width of 1264 pixels, and a height of 904. The WindowSize display does obscure the breadcrumbs, but in most cases that is inconsequential. By default, the "View WindowSize" permission is enabled only for the administrator.

Copyright © 2012 Michael J. Ross. All rights reserved.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <address> <area> <blockquote> <br> <cite> <code> <dd> <div> <dl> <dt> <em> <fieldset> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <img> <input> <li> <map> <ol> <p> <pre> <span> <strong> <sup> <u> <ul>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
7 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.