-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
271 lines (238 loc) · 10.8 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html>
<head>
<title>iPhone 6 Resolution</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- CSS
================================================== -->
<!-- Bootstrap 3-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic|Roboto+Condensed:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
<!-- Template Styles -->
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- NAVBAR
================================================== -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Replace text with your app name or logo image-->
<a class="navbar-brand" href="#">iPhone 6 Resolution</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a onclick="$('header').animatescroll({padding:71});">The Resolution</a></li>
<li><a onclick="$('.detail').animatescroll({padding:71});">Explanation</a></li>
<li><a onclick="$('.features').animatescroll({padding:71});">Get Your App Ready</a></li>
<li><a onclick="$('.social').animatescroll({padding:71});">Get Wired In</a></li>
</ul>
</div>
</div>
</nav>
<!-- HEADER
================================================== -->
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>1242 x 2208</h1>
<h2>414 x 736 points (@3x)</h2>
<p class="lead">iPhone 6 Plus</p>
<div class="carousel-iphone">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/screenshots/app-1.png" alt="App Screen 1">
</div>
<div class="item">
<img src="img/screenshots/app-2.png" alt="App Screen 2">
</div>
<div class="item">
<img src="img/screenshots/app-3.png" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- PURCHASE
================================================== -->
<section class="purchase">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1>This changes the way graphics are rendered on the screen.</h1>
<p class="lead">You don't need to be confused or try to remember all these seemingly random numbers. Just come back here, and we'll have all the numbers you need at your finger tips.</p>
<button type="button" class="app-store"></button>
</div>
</div>
</div>
</section>
<!-- PAYOFF
================================================== -->
<section class="payoff">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>You'll should actually start with points. Points tell you how things will appear on the screen, and how they'll actually be drawn on the screen.</h1>
<h1>iPhone 6+ renders <strong>1242 x 2208 px</strong> as <strong>414 x 736 pt</strong></h1>
<h1>iPhone 6 renders <strong>750 x 1334 px</strong> as <strong>375 x 667 pt</strong></h1>
<h1>iPhone 5 renders <strong>640 x 1136 px</strong> as <strong>320 x 568 pt</strong></h1>
<h1>iPhone 4 renders <strong>640 x 960 px</strong> as <strong>320 x 480 pt</strong></h1>
<h1>The original iPhone pixels correlated with rendered points one to one. Now, with the iPhone 6 Plus the pixels are downsampled by 1.15 to give you a device pixel resolution of 1080 x 1920.</h1>
</div>
</div>
</div>
</section>
<!-- DETAILS
================================================== -->
<section class="detail">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-example-generic-2" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<h1>Rendered Pixels</h1>
<p>Point based drawings are rasterized into pixels. The first iPhone was a 1x scale factor. The iPhone 4 Retina display brought a 2x scale factor. The point coordinates of the iPhone 6 Plus are multiplied by a scale factor of 3x.</p>
</div>
<div class="col-sm-12 col-md-5">
<div class="app-screenshot">
<img src="img/screenshots/app-1.png" class="img-responsive" alt="App Screen 1">
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<h1>Physical Pixels</h1>
<p>The iPhone 6 screen is matched with the the rasterized scale of 2x. That's 750 x 1334 pixels on the screen. The iPhone 6 Plus has a screen with a slightly lower pixel resolution (/1.15). After the screen is rasterized to a pixel size it's downsampled to fit the physical resolution.</p>
</div>
<div class="col-sm-12 col-md-5">
<div class="app-screenshot">
<img src="img/screenshots/app-2.png" class="img-responsive" alt="App Screen 2">
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<h1>Points Per Inch</h1>
<p>The physical resolution is the most important. Once you reach a certain PPI your user can't make out the pixels. This is the reason that any other phones with a massive PPI doesn't look any better than the iPhone. The original iPhone had 163 PPI. The <strong>iPhone 6 has 326 PPI</strong>. And the <strong>iPhone 6 Plus has 401 PPI</strong>.</p>
</div>
<div class="col-sm-12 col-md-5">
<div class="app-screenshot">
<img src="img/screenshots/app-3.png" class="img-responsive" alt="App Screen 3">
</div>
</div>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES
================================================== -->
<section class="features">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="circle"><i class="icon-bookmark"></i></div>
<h2>Prepare your app</h2>
<p>In order for your app to use native resolution on the iPhone 6, you'll need to include a 750 x 1334 resolution launch image in your app images.</p>
</div>
<div class="col-md-4">
<div class="circle"><i class="icon-keypad"></i></div>
<h2>Testing</h2>
<p>The iOS 8 Simulator that comes with Xcode 6 is ready to test apps in this resolution. You can tell if you're running native by looking for a 1px black bar.</p>
</div>
<div class="col-md-4">
<div class="circle"><i class="icon-like"></i></div>
<h2>Love every pixel</h2>
<p>Everyone is talking adaptive layout design. We believe you can still love every pixel. Hopefully these numbers help you as you mock up you app.</p>
</div>
</div>
</div>
</section>
<!-- SOCIAL
================================================== -->
<section class="social">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Get Wired In</h2>
<a class="icon-twitter" href="http://twitter.com/wearewiredin"></a>
<a class="icon-rss" href="http://blog.wearewired.in"></a>
</div>
</div>
</div>
</section>
<!-- GET IT
================================================== -->
<section class="get-it">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>We love the iPhone and hope to have an app out soon.</h1>
<a href="http://wearewired.in" class="lead">Sign up to hear about when it will come</p>
</div>
<div class="col-md-12">
<hr />
<ul>
<li><a onclick="$('header').animatescroll({padding:71});">The Resolution</a></li>
<li><a onclick="$('.detail').animatescroll({padding:71});">Explanation</a></li>
<li><a onclick="$('.features').animatescroll({padding:71});">Get Your App Ready</a></li>
<li><a href="http://wearewired.in">Get Wired In</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- JAVASCRIPT
================================================== -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/animatescroll.js"></script>
<script src="js/scripts.js"></script>
<script src="js/retina-1.1.0.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54305455-3', 'auto');
ga('send', 'pageview');
</script>
</html>