Simple Media Queries Tester

Die Möglichkeiten von CSS Media Queries in einem Blick halten empfinde ich gerade beim Entwickeln wichtig, darum ein kleines Tool, was dies ermöglicht.

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 6 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

CSS Media Queries dringen immer weiter vor und die Möglichkeiten der Anpassung bei der Größe einer Website an die den entsprechenden Client bzw. die Bildgröße des Browsers werden notwendiger. Die Media Queries sind eine Lösung, die ihre Vor- und Nachteile haben. Beim Einsetzen empfand ich es manchmal als Nachteil, dass ich mir nicht alle Größe gleichzeitig ansehen konnte. Warum also nicht einfach ein kleines Script und das iframe-Element sinnvoll gebrauchen.
Wer mag und dies braucht, der findet hier nun eine simple und einfache Lösung oder kann auch gern das laufende Script in meinem "Test-Labor" nutzen. Die Version hat auch einige weitere Spielereien inne, so kann man außerdem die Werte der iframes anpassen und diese Daten speichere ich mittels der DOM Storage-API innerhalb eines Browsers lokal. Meine Lösung im Labor hat keinen Fallback und sollte nur mit Browsers sauber laufen, die die Möglichkeit der Storage API unterstützen.

Die Lösung kann beliebig erweitert und verbessert werden, viel Freude damit.

Screenshot Simple Media Queries Tester

Der folgende Code ist lediglich in einer PHP-Datei zu speichern und kann dann genutzt werden. Ich habe nur wenig mit CSS gespielt und angepasst; ebenfalls ist die Browserunterstützung vermutlich nicht sonderlich groß, da ich rein auf HTML5 und CSS3 setze und keine Scripte dafür hinterlege.


<!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 - https://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="https://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 '<p>keine Seite geladen - Adresse Eingeben</p>';
		}
		?>
	</section>
	
	<footer>
		<p>
		&copy; 2010 <a href="https://bueltge.de/">bueltge.de</a> &middot; <a href="https://bueltge.de/impressum/">Impressum</a>
		</p>
	</footer>

</body>
</html>

Comments are closed.