Last active
August 29, 2015 14:07
-
-
Save madrobby/c010cd550aa55ecbda1c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- iPhone 6 Plus --> | |
<link href="startup-image-1242x2148.png" | |
media="(device-width: 414px) and (device-height: 736px) | |
and (-webkit-device-pixel-ratio: 3)" | |
rel="apple-touch-startup-image"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# generate startup images for all known iOS combinations | |
SIZES = %w( | |
1242x2208|60|retina-5_5|iPhone_6_Plus | |
750x1334|40|retina-4_7|iPhone_6 | |
640x1136|40|retina-5|iPhone_5 | |
640x960|40|retina|iPhone_4 | |
320x480|20|iphone|iPhone | |
1536x2048|40|ipad-landscape-retina|iPad_Retina | |
1536x2048|40|ipad-portrait-retina|iPad_Retina | |
768x1024|20|ipad-landscape|iPad | |
768x1024|20|ipad-portrait|iPad | |
) | |
SIZES.each do |size| | |
res, statusbar, name, device = size.split('|') | |
w, h = res.split('x').map(&:to_i) | |
h -= statusbar.to_i | |
`convert -size #{w}x#{h} xc:blue -pointsize 36 -fill white -draw "text 25,50 '#{w}×#{h}: #{name}'" -draw "text 25,90 '#{device}'" -draw "circle #{w/2},#{h/2} #{w/2},#{w/2}" startup-image-#{w}x#{h}.png` | |
end |
For completeness, here's the HTML for the same thing on iPhone 6:
<!-- iPhone 6 -->
<link href="startup-image-750x1294.png"
media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
If you want to be complete, there's also the iPhone 6 Plus in Zoom mode: same logical-pixels dimensions as the iPhone 6, but a device-pixel-ratio of 3 (so your picture would have (375*3)x(667*3-60) = 1125x1941
).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Startup images on iOS web apps need to be cut to not include the status bar area. Due to a bug in iOS that's been around since iOS 7, the image is vertically streched when the app is starting up (I can't find how to make that stop). For the @3x Retina HD screen on an iPhone 6 you thus need an image that is 60 pixels shorter than the (virtual) screen resolution, which amounts to 1242x2148.