Responsive Development Tool

As a developer of responsive websites, you often need to know the width of the browser window. Perhaps also the height.

No doubt, you already have tools where you can view how pages look in various devices.

Sometimes you need to see how a page looks between sizes. To do that, you use your desktop or laptop and change the browser window size to see how the content flows.

The browser width and/or height generally needs to be available so the correct measurements can be specified when updating @media query CSS.

Some browsers have built-in tools, or add-ons available, to get the measurements. A person can also install on-screen rulers, which are handy for many things in addition to determining a browser's size.

Something even better is Auto-Dimension Display: A floating, automatically-updated div with always-current measurements.

The measurements are of the viewport, the part of the browser window within which a web page is displayed. The viewport does not include browser menu header area or window borders or anything other than the area where web pages can be displayed.

You see a demo example on this page about a hundred pixels from the top‑left corner. The numbers are the dimensions of the viewport displaying the web page.

If you can, change your browser size to see the demo numbers change. Otherwise, if you're using a mobile device, tilt the device to change its portrait/landscape orientation to see the numbers change.

When you implement Auto-Dimension Display on a web page, the position of the information div can be adjusted. As can its CSS style.

Have it on while developing. Turn it off to show the page to your client.

Implementing Auto-Dimension Display

Decide which web page to install it on. Then copy the code further below and paste it into the bottom of the web page source code.

It works as is. There's nothing that must be changed, although you may if you wish.

The CSS style of the display div may be changed to whatever suits you. The position of the div may be changed. And the display itself may be turned off or on.

I'll talk about changing the display after the source code. Copy it and paste the source code into the bottom of your page.

<div 
   id="measurements" 
   style="
      display:block; 
      z-index:999; 
      position:fixed; 
      left:100px; 
      top:100px; 
      border:3px solid black; 
      background-color:rgba(255,255,255,.7); 
      color:black; 
      padding:.5em; 
      border-radius:.5em; 
      line-height:115%; 
      font-size:1em;
      font-weight:bold;
    ">
</div>

<script>
/* Auto-Dimension Display
   Version 1.0
   August 22, 2018
   Will Bontrager Software, LLC
   https://www.willmaster.com/
*/
function Measurements()
{
   var report = "Width:" + ViewportWidth() + "<br>" + "Height:" + ViewportHeight();
   var reportdiv = document.getElementById("measurements").innerHTML = report;
}
function ViewportWidth() { return Math.max( (self.innerWidth?self.innerWidth:0), (document.documentElement.clientWidth?document.documentElement.clientWidth:0) ); }
function ViewportHeight() { return Math.max( (self.innerHeight?self.innerHeight:0), (document.documentElement.clientHeight?document.documentElement.clientHeight:0) ); }
var addEventHandler = function(element,eventType,functionRef)
{
   if( element == null || typeof(element) == 'undefined' ) { return; }
   if( element.addEventListener ) { element.addEventListener(eventType,functionRef,false); }
   else if( element.attachEvent ) { element.attachEvent("on"+eventType,functionRef); }
   else { element["on"+eventType] = functionRef; }
};
Measurements();
addEventHandler( window, "resize", Measurements );
</script>

Changing the Display

All display changes are done within the inline CSS of the div.

Turning the display off and on.

Probably the change you'll do most often is turning the display off and on.

The above source code has it turned on, as you'll see with the display:block; CSS declaration.

To turn it off, change display:block; to display:none;. To turn it on, change it back to display:block;.

Adjusting the Z-index.

The z-index value is specified as 999 (z-index:999;) to make the div appear in front of all other elements of the page. In rare cases, the value may need a larger number.

Changing the display position.

The display position is fixed with position:fixed;. The source code as downloaded will position the display 100 pixels from the left edge of the browser viewport (left:100px;) and 100 pixels from the top (top:100px;).

The values for the left and top positions may be changed. Further, the left property may be changed to right and/or the top property may be changed to bottom.

Making it Even Easier

To make it even easier to implement, save the source code to a .php file on your server.

To use it on a page, pull it in with the PHP include() function. Example:

<?php include($_SERVER["DOCUMENT_ROOT"] . "/location/of/file.php") ?>

Change /location/of/file.php to the location of the .php file. The location would be the file's location relative to document root. (Example: A file at http://example.com/php/file.php would be at location /php/file.php)

To turn it off, remove the PHP include() function from the page.

When you start using Auto-Dimension Display, I bet you'll wonder how you ever developed a responsive site without it.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager