320 × 568
375 × 667
1125 × 2001
4.7″
5.5″
The device screen may
have lower pixel resolution
than the image rendered
in previous step.
Before the image can be
displayed, it must be
downsampled (resized) to
lower pixel resolution.
Physical Pixels
At the beginning,
coordinates of all
drawings are specified in
Points are abstract units,
they only make sense in
this mathematical
coordinate space.
Points
Point-based drawings are
rendered into pixels. This
process is known as
rasterization.
Point coordinates are
multiplied by scale factor
to get pixel coordinates.
Higher scale factors result
in higher level of detail.
Rendered Pixels
Finally, computed pixels
are displayed on the
physical screen.
The PPI number tells you
how many pixels fit into
one inch and thus how
large the pixels appear in
the real world.
Physical Device
750 × 1334
iPhone 6
iPhone 6 Plus
4.7″
5.5″
points.
render at 3×
render at 2×
Display Zoom
Display Zoom
(device pixels)
414 × 736
1242 × 2208
1080 × 1920
5.5″
show at 401 PPI
(pixels)
(points)
(device pixels)
iPhone 6 Plus
5.5″
render at 3×
375 × 667
750 × 1334
4.7″
iPhone 6
render at 2×
1080 × 1920
(device pixels)
320 × 568
640×1136
iPhone 5, 5s
render at 2×
4″
4″
320 × 480
640 × 960
3.5″
render at 2×
(pixels)
iPhone 4, 4s
3.5″
320 × 480
3.5″
render at 1×
(pixels)
iPhone 2G, 3G, 3GS
3.5″
(points)
(points)
(points)
(points)
(points)
(points)
downsampling × 0.96
downsampling / 1.15
(pixels)
(pixels)
(pixels)
320 × 480
show at 401 PPI
show at 326 PPI
show at 326 PPI
show at 326 PPI
show at 326 PPI
show at 163 PPI
4.7″
640×1136
(pixels)
upsampling × 1.171875