-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
102 lines (93 loc) · 3.1 KB
/
index.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Preview Responsive Designs</title>
<meta name="generator" content="TextMate Bundle by Justin Avery http://www.justinavery.me/ & http://surfthedream.com.au">
<meta name="author" content="Justin Avery">
<!-- Date: 2011-07-04 -->
<!-- link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"-->
<style type="text/css" media="screen">
#il {background:#fff url('iphone-landscape.png') no-repeat 0 0;
position:relative;
height: 364px;
width: 730px;
}
#il iframe {
margin: 20px 0 0 137px;
}
#ip {background:#fff url('iphone-portrait.png') no-repeat 0 0;
position:relative;
width: 364px;
height: 730px;
}
#ip iframe {
margin: 110px 0 0 20px;
}
#pl {background:#fff url('ipad-landscape.png') no-repeat 0 0;
position:relative;
height: 980px;
position: relative;
width: 1284px;
}
#pl iframe {
margin: 105px 0 0 108px;
}
#pp {background:#fff url('ipad-portrait.png') no-repeat 0 0;
height: 1248px;
position: relative;
width: 980px;
}
#pp iframe {
margin: 116px 0 0 105px;
}
</style>
</head>
<body>
<div id="top">
<h1>Device Widths</h1>
<ul>
<li><a href="#iphone-portrait">iPhone Portrait (320x480)</a>
</li>
<li><a href="#iphone-landscape">iPhone Landscape (480x320)</a></li>
<li><a href="#ipad-portrait">iPad Portrait (768x1024)</a></li>
<li><a href="#ipad-landscape">iPad Landscape/Desktop (1024x768)</a></li>
<li><a href="#desktop-1200">Desktop (Desktop 1200px)</a></li>
</ul>
<div id="iphone-portrait">
<small><a href="#top">top</a></small>
<h2>Iphone Portrait (320 x 480) <small><a href="#top">top</a></small></h2>
<div id="ip">
<iframe scrolling="no" width="320px" height="480px" src="http://dev.justinavery.me/design/responsive/"></iframe>
</div>
</div>
<div id="iphone-landscape">
<small><a href="#top">top</a></small>
<h2>iPhone Landscape (480x320)</h2>
<div id="il">
<iframe scrolling="no" width="479px" height="320px" src="http://dev.justinavery.me/design/responsive/"></iframe>
</div>
</div>
<div id="ipad-portrait">
<small><a href="#top">top</a></small>
<h2>iPad Portrait (768x1024)</h2>
<div id="pp">
<iframe scrolling="no" width="767px" height="1024px" src="http://dev.justinavery.me/design/responsive/"></iframe>
</div>
</div>
<div id="ipad-landscape">
<small><a href="#top">top</a></small>
<h2>iPad Landscape/Desktop (1024x768)</h2>
<div id="pl">
<iframe scrolling="no" width="1024px" height="768px" src="http://dev.justinavery.me/design/responsive/"></iframe>
</div>
</div>
<div id="desktop-1200">
<small><a href="#top">top</a></small>
<h2>Desktop 1200px <small><a href="#top">top</a></small></h2>
<iframe scrolling="no" border="1" width="1280px" height="800px" src="http://dev.justinavery.me/design/responsive/"></iframe>
</div>
</div>
<small>Developed by Justin Avery <a href="http://www.justinavery.me/">Justin Avery</a> & <a href="http://surfthedream.com.au">Surf the Dream</a>.</small>
</body>
</html>