Skip to content

Instantly share code, notes, and snippets.

@alexisg

alexisg/responsive.html

Forked from gmodarelli/responsive.html
Created April 12, 2012 19:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save alexisg/2370156 to your computer and use it in GitHub Desktop.
Save alexisg/2370156 to your computer and use it in GitHub Desktop.
Download ZIP
Simple responsive design test page. More info here: http://bricss.net/post/16538278376/simple-responsive-design-test-page. Forked by alexisg to add 15 pixels of width to frame sizes (for scrollbars) and added mobile landscape/large desktop sizes. Simply a
Raw
responsive.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Design Testing</title>
<style type="text/css">
body {
background: url(http://subtlepatterns.com/patterns/whitey.png);
font-family: sans-serif;
margin: 20px;
overflow-x: scroll;
}
.wrapper { width: 6000px }
.frame { float: left }
h2 {
color: hsl(210,10%,7%);
margin: 0 0 5px 0;
text-shadow: rgba(255,255,255,.75) 0 1px 0;
}
iframe {
margin: 0 20px 20px 0;
border: 1px solid #999;
}
p { clear: both }
</style>
</head>
<body>
<section class="wrapper">
<div class="frame">
<h2>320 &times; 480 <small>(mobile)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms allow-scripts" seamless width="335" height="480"></iframe>
</div>
<div class="frame">
<h2>768 &times; 1024 <small>(tablet - portrait)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms allow-scripts" seamless width="783" height="1024"></iframe>
</div>
<div class="frame">
<h2>1024 &times; 768 <small>(tablet - landscape)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms allow-scripts" seamless width="1039" height="768"></iframe>
</div>
<div class="frame">
<h2>1280 &times; 1024 <small>(desktop)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms allow-scripts" seamless width="1295" height="1024"></iframe>
</div>
<div class="frame">
<h2>1440 &times; 900 <small>(desktop)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms allow-scripts" seamless width="1455" height="900"></iframe>
</div>
</section>
<p>Frame widths are actually 15px wider to accomodate the scrollbars in Webkit</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment