Cannot seem to get the Apple Startup image to appear on our mobile (not native) app.
I have:
Added meta tag -
Tried both 320x480 and 320x460 .png images and nothing
Tried to use an absolute url
looked at logs and image seems to be called just not appearing on iphone (or iPad)
Using Apple naming conventions, like: Default.png, Default#2x.png, etc.
Help!
Doug
You can not have a landscape startup image on an iPhone. Landscape images ONLY work on the iPad. Also, you must use the proper size on the iPhone, or it will not display at all.
This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, these include the status bar area as well.
iPad Landscape – 1024 x 748
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
iPad Portrait – 768 x 1004
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)
<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />
iPhone/iPod Touch Portrait – 640 x 960 pixels (Retina Display high-resolution)
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.
Related
I'm building an app for iPhone, iPad, Android and BlackBerry. The app only has to work in portrait mode (i.e. if you rotate the mobile device in landscape orientation, nothing happens). The app has to display differently depending on the resolution:
If the screen width is <= 240px: micro mode (mainly for BlackBerry)
Otherwise, if the screen width is <= 480px: small mode (for normal res mobile devices)
Otherwise, if the screen width is <= 767px: medium mode (for high res mobile devices like iPhone 4+)
Otherwise (screen width >= 768px): big mode (for tablets)
Everything works fine when trying to resize the window on my browser, all the elements resize and reposition correctly depending on the viewport size. The only problem I'm facing is with iPhone 4 (and probably the same thing would happen on iPhone 4S and iPhone 5). In fact, it's using the small mode instead of the medium mode despite its screen width is 640px. I specified the viewport meta in the following way:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />
Does anybody know why this happens and how to fix it?
Thank you very much.
The iPhone is 320 CSS pixels wide, which is scaled from 640 device pixels.
You can filter by device-pixel-ratio:2 if you need to handle it differently to the non-retina version.
I'm having trouble wrapping my head around sizing images and ui elements for my iphone app using phonegap (basically mobile website gone native app). Here are my PSD settings:
width: 640px
height: 960px
resolution: 326px
I'm creating two images, one at half resolution and the other at full. Then I'm using a plugin to recognize the retina display and replace all images with "*-2x". The trouble is that the images appear larger on my retina iphone and are blurry. I'm wondering if my viewport is messing things up as it zooms in on the screen to fit the app:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I have never used PhoneGap, but to make HTML show images in Retina res what I do is link to a retina res image, say the image is 640x960 pixels, but in the HTML set the size properties to 320x480.
The reason for this, is iOS uses resolution independent "points" instead of "pixels" for layout.
Hope this question hasn't been asked before.
I've got the following working
<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone4-portrait.jpg" />
i'm aware that the image has to be 640x920 else it will not work
i know that there is no Landscape option for this? or is there?
So...on to my issue, when loading the web app from the home screen in Landscape you can see the page content behind the splash screen (lighter green area in the landscape image below), where the states bar was in portrait
Has anyone out there had this issue, if so how are you getting around it.
Thanks
You can not have a landscape startup image on an iPhone. Landscape images ONLY work on the iPad. Also, you must use the proper size on the iPhone, or it will not display at all.
This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, these include the status bar area as well.
iPad Landscape – 1024 x 748
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
iPad Portrait – 768 x 1004
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)
<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />
iPhone/iPod Touch Portrait – 640 x 960 pixels (Retina Display high-resolution)
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.
Getting these to work is an utter nightmare.
On git hub (https://gist.github.com/472519) it says the retina should be
<link rel="apple-touch-startup-image" media="screen and(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="apple_launch_640x920.png" /> - and everybody says it should be the exact size or it won't work yet everybody says different sizes.
On top of that apps seem to cache (maybe not now in iOS5.1 but I am not sure) so you don't have any way of knowing if you have done it right or not if you didn't get it right first time.
I REALLY REALLY REALLY wish Apple would post up code on its dev info somewhere with the definitive answer to this (including iPad Retina) so we could just treat this as the 10minute job it should be rather than wasting hours and hours and hours messing around...:(
I have found the following works on iPad 2 at least- the iPad2 landscape version is actually portrait with the content rotated, so make the landscape version (748x1024) and then rotate 90 CLOCKWISE and you will be good to go.
<!-- startup image for web apps - iPad - landscape (748x1024)
Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="/apple_launch_748x1024.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="/apple_launch_768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
What to do with the rest though I dont know, I don't have an old iphone or a retina ipad, and this is all so flakey whether any of it works is anyones guess...
There is no landscape launch screen spec for the iPhone. This is because the iPhone does not rotate its home screen when the device is sideways -- users will always be launching from portrait orientation.
If you insist you need this however, you could just have your regular launch screen be sideways, suggesting to the user they need to turn their phone around.
I'm having trouble understanding how the mobile resolution works. From what I know, standard website mobile resolution is 320px width. The problem seems to be with iPhone 4, which seems to have 640px width screen resolution, but yet, it displays web in 320px.
What is the solution here? Do I code 2 different resolutions for 320px and 640px screens? How do I force iPhone 4 to display 640px web?
Well basically, as you've noticed, iPhone 4+ resolution is 640px, but the browser only displays 320px of it, for a number of different reasons. Check this other answer for more details on how this is happening:320px resolution for web apps
That also talks about the fact that you can specify the viewport for a website to force it to be seen in 640px on an iphone, but that you shouldn't do that, but just double the resolution on the image you use.
I have found websites with a minimum width of 320px will look good on most high-end mobile devices like the iPhone, Android and Nokia N97.Some of the screen resolutions of most popular devices:
"iPhone 320 x 480"
"iPhone 4 320 x 480 (scaled by a factor of 2)"
"HTC Legend 320 x 480"
Either you can use an adaptive layout, like used on this website (try decrease the width of your browser window to see the site adapt). That design is also discussed in this blog post.
Or you create separate layouts for different resolutions all together using media queries.
Because the number of pixels has doubled from iPhone 3 to iPhone 4, it would have meant every website optimized for the iPhone 3 would then be ... tiny on the display.
Hence, a devicePixelRatio was introduced, to retain the size of the websites (in mm or inches) while doubling the physical pixels, efficiently making double resolution (retina) images and fonts much sharper, but retaining old CSS font and pixel sizes.
The devicePixelRatio is 2:1 on iPhone 4 and 5.
That means an image defined in css with 100100px will actually take up 200x200 physical pixels. So you can still css-style the page with 320px total width; 320 dips - device independent pixels.
Note that the devicePixelRatio also exists on Android, where it ranges from 1.5 up to 3.
More information:
http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html and
http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
<link rel="stylesheet" media="all and (orientation:portrait)" href="/Content/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/Content/landscape.css">
This way CSS will load separately for landscape and protrait.
#media (min-width: 500px) and (max-width: 640px){}
#media (min-width: 320px) and (max-width: 400px){}
This is how the resolution will be handled.
The most common mobile screen sizes are 320x240, 480x320, 800x480, 960x480, 1024x800, and 1024x768.
you use this line of code:
<link type="text/css" href="css/mobile.css" rel="stylesheet" media="only screen and (max-width: 480px)" />
When it detects your screen to be less than 480px in width, it will use that css. If not, it will use the normal css you used before
Are Apple touch icons bigger than 60x60 supported, and if so, what dimensions should I use for the iPad and iPhone?
Updated list December 2019, iOS13
One icon for iOS 180x180 px and one for android 192x192 px (declared in site.webmanifest).
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
#### site.webmanifest
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"display": "standalone"
}
Deprecated list October 2017, iOS11
List for iPhone and iPad with and without retina
<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini #1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini #2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
Update Oct 2017 iOS 11:
iOS 11 checked, iPhone X and iPhone 8 introduced
Update Nov 2016 iOS 10:
New iOS version iPhone 7 and iPhone 7plus introduced, they have the same display resolution, dpi, etc as iPhone 6s and iPhone 7plus, until now no changes found respecting the update 2015
Update Mid 2016 Android:
Add Android Devices to the list as the apple-touch links are marked as deprecated by Google and will be not supported anytime for their devices
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
Update 2015 iOS 9:
For iOS 9 and iPad pro
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
The new iPhones (6s and 6s Plus) are using the same sizes as the iPhone(6 and 6 Plus), the new iPad pro uses an image of size 167x167 px, the other resolutions are still the same.
Update 2014 iOS 8:
For iOS 8 and iPhone 6 plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
Iphone 6 uses the same 120 x 120 px image as iphone 4 and 5 the rest is the same as for iOS 7
Update 2013 iOS7:
For iOS 7 the recommended resolutions changed:
for iPhone Retina from 114 x 114 px to 120 x 120 px
for iPad Retina from 144 x 144 px to 152 x 152 px
The other resolution are still the same
57 x 57 px default
76 x 76 px for iPads without retina
Source:
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
Use these sizes 57x57, 72x72, 114x114, 144x144 then do this in the head of your document:
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
This will look good on all apple devices. ;)
With the iPad (3rd generation) there are now four icon sizes 57x57, 72x72, 114x114, 144x144.
Because retina icons are exactly double the size of the standard icons we really only need to make 2 icons: 114 x 114 and 144 x 144. By setting the retina sized icon to the corresponding standard icon iOS will scale them accordingly.
<!-- Standard iPhone -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone -->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
The icon on Apple's site is 152x152 pixels.
http://www.apple.com/apple-touch-icon.png
Hope that answers your question.
TL;DR: use one PNG icon at 180 x 180 px # 150 ppi and then link to it like this:
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
Details on the Approach
As of 2020-04, the canonical response from Apple is reflected in their documentation on iOS.
Officially, the spec says:
iPhone 180px × 180px (60pt × 60pt #3x)
iPhone 120px × 120px (60pt × 60pt #2x)
iPad Pro 167px × 167px (83.5pt × 83.5pt #2x)
iPad, iPad mini 152px × 152px (76pt × 76pt #2x)
In reality, these sizing differences are tiny, so the performance savings will really only matter on very high traffic sites.
For lower traffic sites, I typically use one PNG icon at 180 x 180 px # 150 ppi and get very good results on all devices, even the plus sized ones.
I have been developing and designing iOS apps for a while and This is the best iOS design cheat sheet out there!
have fun :)!
Update:
For iOS 8+, and the new devices (iPhone 6, 6 Plus, iPad Air) see this updated link.
Meta update:
Iphone 6s/6s Plus have the same resolutions as iPhone 6/6 Plus respectively
This is an image from the new version of the article:
The relevant documentation on Apple's site, Specifying a Webpage Icon for Web Clip.
There is no need to put anything in the head of your document. If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix.
For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
Yes. If the size does not match, the system will rescale it. But it's better to make 2 versions of the icons.
iPad — 72x72.
iPhone (≥4) — 114x114.
iPhone ≤3GS — 57x57 — If possible.
You could differentiate iPad and iPhone by the user agent on your server. If you don't want to write script on server, you could also change the icon with Javascript by
<link ref="apple-touch-icon" href="iPhone_version.png" />
...
if (... iPad test ...) {
$('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}
This works because the icon is queried only when you add the web clip.
(There's no public way to differentiate iPhone ≥4 from iPhone ≤3GS in Javascript yet.)
Yes, bigger than 60x60 are supported. For simplicity, create icons of these 4 sizes:
1) 60x60 <= default
2) 76x76
3) 120x120
4) 152x152
Now, it's preferable to add them as links in your HTML as:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
You can choose to not declare the 4 links above but just declare a single link, in which case give the highest size of 152x152 or even a size higher than that, say 196x196. It will always trim down the size for re-purposing. Ensure you mention the size.
You can also choose not to declare even a single link. Apple mentions that in this scenario, it will lookup the server root first for the size immediately higher that the size it wants (naming format: apple-touch-icon-<size>.png), and if that's not found then it will next look for the default file: apple-touch-icon.png. It's preferable that you define the link(s) as that will minimize the browser querying your server.
Icon necessities:
- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors
In versions older than iOS 7, if you don't want it to add effects to your icons, then just add the suffix -precomposed.png to the file name. (iOS 7 doesn't add effects even without it).
I think this question is about web icons. I've tried giving an icon at 512x512, and on the iPhone 4 simulator it looks great (in the preview) however, when added to the home-screen it's badly pixelated.
On the good side, if you use a larger icon on the iPad (still with my 512x512 test) it does seem to come out in better quality on the iPad. Hopefully the iPhone 4 rendering is a bug.
I've opened a bug about this on radar.
EDIT:
I'm currently using a 114x114 icon in hopes that it'll look good on the iPhone 4 when it is released. If the iPhone 4 still has a bug when it comes out, I'm going to optimize the icon for the iPad (crisp and no resize at 72x72), and then let it scale down for old iPhones.
For iPhone and iPod touch, create icons that measure:
57 X 57 pixels
114 X 114 pixels (high resolution #2X)
For iPad, create an icon that measures:
72 x 72 pixels
144 X 144 pixels (high resolution #2X)