grant-p
2/4/2012 - 7:18 AM

Simple responsive design test page. More info here: http://bricss.net/post/16538278376/simple-responsive-design-test-page

Simple responsive design test page. More info here: http://bricss.net/post/16538278376/simple-responsive-design-test-page

responsive.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Responsive Design Testing</title>
	<style>
		body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
		.wrapper { width: 6000px; }
		.frame { float: left; }
		h2 { margin: 0 0 5px 0; }
		iframe { margin: 0 20px 20px 0; border: 1px solid #666; }
	</style>	
</head>
<body>
	<div class="wrapper">
		<div class="frame">
			<h2>320 &times; 480 <small>(mobile)</small></h2>
			<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>
		</div>
		<div class="frame">
			<h2>480 &times; 640 <small>(small tablet)</small></h2>                   
			<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe>
		</div>                                                                                                                        
		<div class="frame">
			<h2>768 &times; 1024 <small>(tablet - portrait)</small></h2>                   
			<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe>
		</div>
		<div class="frame">
			<h2>1024 &times; 768 <small>(tablet - landscape)</small></h2>
			<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe>
		</div>
		<div class="frame">
			<h2>1200 &times; 800 <small>(desktop)</small></h2>
			<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
		</div>
	</div>
</body>
</html>