Drupal Viewport Dimensions Using WindowSize

This article was published in the print magazine Drupal Watchdog, Volume 2 Issue 1, , on page 8, by Tag1 Publishing. The magazine was distributed at DrupalCon Denver, . 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.
bad bots block