Simple Media Queries Tester
CSS Media Queries are getting more popular and the adjustment of the size of a website for different clients or the size of the browsers are more necessary. The Media Queries are a solution, which also have its advantages and disadvantages. It was a disadvantage, when using, that I couldn’t see all sizes at the same time. So why not just a small script, the iframe element. If you like to use it, here is a simple solution or you can use the current script in my “Test-Laboratory”.
The solution can be expanded and improved, enjoy.
You can store the following code in a PHP file and can then be used. I played a little with CSS and adapted it; also browser support is probably not very large because I purely use HTML5 and CSS3 and don’t use any scripts.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Simple Media Queries Tester</title> <meta name="description" content="Simple Media Queries Tester" /> <meta name="author" content="Frank Bueltge - http://bueltge.de" /> <style type="text/css" media="screen"> /*<![CDATA[*/ body { background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:100%;margin:20px; } a { text-decoration:none; color:#1152c8; } fieldset { border:1px solid #ccc; margin:0 0 20px 0; } form#mediaqueriestest input { margin:auto; } form#mediaqueriestest button { margin:auto;text-shadow:0 1px 1px #000;text-transform:uppercase; } form#mediaqueriestest button:hover { background:#1152c8;color:#000;cursor:pointer; } form#mediaqueriestest input:active, form#mediaqueriestest input:focus { outline:none;border:1px solid #333;background:#fff;color:#000;-moz-border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;border-radius:20px; } form#mediaqueriestest fieldset, form#mediaqueriestest legend, form#mediaqueriestest input, form#mediaqueriestest button, iframe, footer { background:#333;color:#fff;padding:7px 25px;border:1px solid #333;-moz-border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;border-radius:20px; } form#mediaqueriestest fieldset, form#mediaqueriestest legend { background:#ccc;color:#000;margin:10px;padding-bottom:25px; } form#mediaqueriestest legend { padding:7px 25px;-webkit-box-shadow: 2px 2px 2px #333; } iframe { margin:0 auto; border:1px solid #ccc; margin:10px; } footer { display:block; color:#333; margin:20px 0 0 0; border:2px solid #ba0100; background:#fff; } /*]]>*/ </style> </head> <body> <header> <h1><a href="http://bueltge.de/" title="to the weblog of the author">Simple Media Queries Tester</a></h1> </header> <section> <form id="mediaqueriestest" action="<?php echo htmlspecialchars( strip_tags($_SERVER['PHP_SELF']) ); ?>" method="get"> <fieldset> <legend>Test your URL</legend> <label for="testurl">Test URL</label> <input type="text" name="testurl" id="testurl" placeholder="Input your test url here" size="70"> <button type="submit">Test it!</button> </fieldset> </form> <?php if ( !empty($_GET['testurl']) ) { $newURL = htmlspecialchars( strip_tags($_GET['testurl']), ENT_QUOTES ); if (preg_match("/^(www.)/i", $newURL) ) $iframeurl = 'http://'.$newURL; elseif (preg_match("/^(http:\/\/)/i", $newURL)) $iframeurl = $newURL; else $iframeurl = 'http://www.' . $newURL; echo '<iframe name="fullsize" id="fullsize" width="960" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>'; echo '<iframe name="netbook" id="netbook" width="650" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>'; echo '<iframe name="mobile" id="meinframe" width="450" height="450" seamless="seamless" src="' . $iframeurl . '"></iframe>'; } else { echo "no page loads - enter address"; } ?> </section> <footer> <p> © 2010 <a href="http://bueltge.de/">bueltge.de</a> · <a href="http://bueltge.de/impressum/">Impress</a> </p> </footer> </body> </html>
if an iframe can recognize that a site have an iphone version for example and display this version, that’s more great.