Simple Media Queries Tester

December 23rd, 2010 by Frank • WPengineer Misc • 1 Comment


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>

1 Comment
  1. sebastien says:
    December 24, 2010 at 3:21 pm

    if an iframe can recognize that a site have an iphone version for example and display this version, that's more great.

WP Engineer Tags