Skip to content

Instantly share code, notes, and snippets.

@tskrynnyk

tskrynnyk/responsive-js-ext.html

Forked from alexisg/responsive.html
Created November 28, 2012 05:51
Show Gist options
  • Save tskrynnyk/4159290 to your computer and use it in GitHub Desktop.
Save tskrynnyk/4159290 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-js-ext.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Design Testing</title>
<style type="text/css">
body { background: #eee; 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