Display Width Tool

The script iterates out 2000 media queries so it wasn’t really built for screens larger, which should be fine because in most cases it’s smaller devices that pose the question most. For instance, I had a batch of styles set to fire off at a min-width: 320px. Little did I know the Android device I was testing on had an overall available width of 314px. It was this reason I wrote the test, and running the page using any browser (desktop and mobile) answered my question.

Why this way?

I realize this can be done 10,000 different ways. To each his own but this answered my question at the time and help me with a few others at the same time. If it helps you great. If not, take what you want and leave the rest at the curb for someone else.

The loop that spits out 2000 @media queries into the style tags:

//run this inside your <style> tags.
<?php
  for ($i=1; $i <= 2000; $i++) {
    echo "@media screen and (width:".$i."px){ #width:before { content:'".$i."'; } }@media screen and (device-width: ".$i."px) { #deviceWidth:before { content:'".$i."'; } }";
    echo "@media screen and (height:".$i."px){ #height:before { content:'".$i."'; } }@media screen and (device-height: ".$i."px) { #deviceHeight:before { content:'".$i."'; } }";
  }
    echo "@media screen and (orientation: portrait) {  #orientation:after { content:'portrait' }}@media screen and (orientation: landscape) {  #orientation:after { content:'landscape' }}";
 ?>

With each @media query $i increases by 1. See what we’re targeting with the @media query: ID’s named #width, #deviceWidth, #height, #deviceHeight, etc. and pseudo classes, too. Then the next line outside of the for loop simply lets us know if we’re in portrait or landscape targeting those ID’s using appropriate CSS properties and values. Not sure I saw any value in the portrait/landscape thing back then.

The markup is simple enough and reveals how this actually comes together using the @media query and targeting element ID’s and add values using the CSS content property. Lastly, below is the JavaScript, which simply gives us the available screen size. It’s just a marker for quick reference:

<p>Device/Screen Orientation: <span id="orientation"></span></p>
<p>Available Width & Height: <span id="width"></span> x <span id="height"></span></p>
<p>Total Width & Height: <span id="deviceWidth"></span> x <span id="deviceHeight"></span></p>

// tells us the overall screen size of device
document.writeln("Total Screen Width & Height: "+ screen.width + " x " + screen.height + "<br>");
document.writeln("Available Screen Width & Height: " + screen.availWidth + " x " + screen.availHeight + "<br>");

** This (by no means) is intended as a substitute for Dev Tools. Just a quick way to load a page into a mobile browser and see the information it provides.