forked from malarkey/320andup
-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsive.html
executable file
·41 lines (39 loc) · 1.46 KB
/
responsive.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Design Testing</title>
<!-- https://gist.github.com/1685127 -->
<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 × 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 × 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 × 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 × 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 × 800 <small>(desktop)</small></h2>
<iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe>
</div>
</div>
</body>
</html>