I've found myself in an odd situation where I've set up Splash screens in iOS for a web app that I'm building and have found myself not being able to exit it after starting it up/closing/restarting it up a couple of times. This bug seems to also prevent rebooting also, I'm able to recreate this on both an iPad 3 and iPad mini and was wondering if someone else is aware of this?
Essentially in doing so, it's caused:
You can't exit the application by tapping the home button, or long pressing it
Can't power off the iPad by holding down the off button!
The screen won't turn off
I'm using the latest iOS for each and currently seem to be stuck waiting them both to run out of power!
Here's the code I have setup for displaying Splash screens:
<link href="images/touch/splash/splash-320x480.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-640x960.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-768x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-1024x768.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="images/touch/splash/splash-2048x1636.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
I'm wondering if anybody else is able to recreate to confirm this issue? I wasn't seeing this until I added the Splash screens.
Edit: I was able to reset only by holding the power button and home button.
Edit 2: Now I've rebooted each of them I can't recreate the issue now. I'll keep trying but there doesn't seem to be any rhyme or reason as to what caused it on 2 separate devices.
Related
I have a web application set as a home screen app targeted for Mobile Safari. I have a series of startup images defined and they work perfectly fine on multiple iPad and iPhone devices running iOS 8. When I setup the same application on devices running iOS 9, the images do not appear.
I've verified the images are on the server. I've deleted the app from my home screen on both the iOS 8 and iOS 9 devices, force-quit Safari, cleared the cache, then re-added the app to the home screen. This was done as a sanity check to make sure there wasn't a caching issue involved.
I've reviewed the common approaches that worked with iOS 8 to see if there's a variation that might still work, such as those found at:
http://taylor.fausak.me/2015/01/27/ios-8-web-apps/
Mulitple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?
Is there an equivalent apple-touch-startup-image for the IPAD?
All of this leads me back to the same issue. The startup images appear for me while running iOS 8, but they do not appear while running iOS 9.
Is anyone else seeing this problem? If startup images are appearing for you using a home screen app running iOS 9, what are the <link> tags that you're using?
Here is the configuration I have currently that works fine running iOS 8:
<!-- STARTUP IMAGES -->
<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="~/assets/images/startup/startup-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="~/assets/images/startup/startup-2048x1496.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 iPad (portrait) -->
<link href="~/assets/images/startup/startup-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iOS 6 iPad (landscape) -->
<link href="~/assets/images/startup/startup-1024x748.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone 5 -->
<link href="~/assets/images/startup/startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone (retina) -->
<link href="~/assets/images/startup/startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 iPhone -->
<link href="~/assets/images/startup/startup-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
I am sorry to tell you this, but I do not think there is a soulotion for this on iOS 9. That feature have just stopped working. I have heard many others having the same problem.
I have the same problem with all my WebApps in devices with IOS9.
It is possible to be seen clearly that the WebApps that is executed on IOS9 devices show the statusBar. This does that the space destined to the startUp image is not the defined one for the same. It can be the cause, but I have not gotten to prove it.
The question is, why IOS9 shows the statusBar when it has configured full-screen?
I've tried adding a startup screen to my application, but it doesn't work (neither from Safari, nor from home screen).
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- Startup images -->
<!-- iOS iPad (retina, portrait) -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image-1536x2008.png">
<!-- iOS iPad (retina, landscape) -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image-1496x2048.png">
<!-- iOS iPad (portrait) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image-768x1004.png">
<!-- iOS iPad (landscape) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image-748x1024.png">
I open it on iPad with retina display. All images are accessible, and load via direct links normally. All landscape images are in portrait format and rotated 90 degrees clockwise. I also tried setting "width" for retina to 2048, with no luck.
Is there anything I missed?
Sources used:
Mulitple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?
Is there an equivalent apple-touch-startup-image for the IPAD?
https://miguelmota.com/blog/iphone-and-ipad-web-app-startup-images/
I'm looking into adding a splash screen for a WebApp in iOS8, however I just get a black rectangle instead of the splash image. An example I found online suffers from the same problem. (As seen here.) I've tried both on an iPad Air and an iPhone 5s. Is this a known bug, or am I doing something wrong?
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-320x460.png"media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
I was just working on a similar project: "building a WebApp" and went through the same headaches.
I have an iPhone 5S with iOS 8.1.1 and I just tested your third line with the 640px x 1096px picture successfully. I included once your whole code snippet and it worked aswell. I also went to your example page and it worked, too.
Unfortunately I don't have the link to the source, because I was just surfing the web but I can remember that one person had a problem with the line (your first line) for the iPhone 3. And as far as I can remember he had to put it at the end for no particular reason.
This is exactly the code I used for my test on line 3:
<link rel="apple-touch-startup-image"
href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"/>
I would suggest to test it only with this line first and adding the rest step by step. Hope it helps to know that it works here :)
One last thought:
If you use a manifest file and you save the startup-image locally, you have to remove the WebApp and save to home screen again to reload the image or you have to update the manifest file aswell. Just in case the black rectangle got saved (not sure if it ever does).
In case you're interested, here is the meta for the title (keep it short):
<meta name="apple-mobile-web-app-title" content="Your WebApp Name" />
I've read countless threads, blog posts, and other documentation online about this, yet I cannot get it to work. I've spent hours researching this and trying different things.
I'm trying to get a splash screen image to show for a web app on the iPad 2. I'm not even concerned with the iPad 3 resolution yet.
These are the tags that I have:
<link href="images/splash_748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup_image">
<link href="images/splash_768.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image">
splash_748.png is 748x1024
splash_768.png is 768x1004
The portrait mode splash screen works just fine. The landscape version will not show. Does anyone have any ideas? I've tried over a dozen different ways to do this. None of them have worked.
I've been deleting the app and clearing Safari's cache each time I make an update. Then I go back to the web page and send it to the home screen. This seems to pick up changes in the images, so I can't imagine it's caching anything else.
Your code has a mistake in it. Look at the end of the first line
rel="apple-touch-startup_image"
it should be
rel="apple-touch-startup-image"
notice the _ should be a -
Edit: Heres my code for iOS web apps - covers most eventualities and seems to work on most devices but don't hold me to it :)
<!-- iOS Device Startup Images -->
<!-- iPhone/iPod Touch Portrait – 320 x 460 (standard resolution) -->
<link rel="apple-touch-startup-image" href="images/ios/iphone-startup-320-460.png" media="screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 1)" />
<!-- iPhone/iPod Touch (high-resolution) Portrait – 640 x 920 pixels -->
<link rel="apple-touch-startup-image" href="images/ios/iphone-startup-640-920.png" media="screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2)" />
<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/ios/ipad-startup-1024-748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1)" />
<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/ios/ipad-startup-768-1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1)"/>
<!-- iPad (high-resolution Landscape – 2048 x 1496 pixels ) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="images/ios/ipad-startup-2048-1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />
<!-- iPad (high-resolution) Portrait – 1536 x 2008 pixels -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/ios/ipad-startup-1536-2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />
<!-- iOS Icons -->
<link rel="apple-touch-icon" href="images/ios/icon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ios/icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/ios/icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/ios/icon-144.png" />
This is how I do it:
<link rel="apple-touch-startup-image" sizes="1024x748" href="Default-Landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
I am using following line of code to show start_up image
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="#img_css_scpt/inreviewim_mobile/images/startup_n_icon_images/apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="#img_css_scpt/inreviewim_mobile/images/startup_n_icon_images/apple-touch-startup-image-1496x2048.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link href="#img_css_scpt/inreviewim_mobile/images/startup_n_icon_images/IM_Startup_768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" />
<!-- iPad (landscape) SPLASHSCREEN-->
<link href="#img_css_scpt/inreviewim_mobile/images/startup_n_icon_images/apple-touch-startup-image-748x1024.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!-- iPhone (Retina) SPLASHSCREEN-->
<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="#img_css_scpt/inreviewim_mobile/images/startup_n_icon_images/apple-touch-startup-image-640x920.png" />
<!-- iPhone 3GS SPLASHSCREEN-->
<link href="#img_css_scpt/inreviewim_mobile/images/startup_n_icon_images/IM_startup_320x460.png" media="screen and (max-device-width: 320px)" rel="apple-touch-startup-image" />
it is looking well for iPhone and iPhone retina but not working for ipad.
Device: iPad
iOS: 3.2,4.1,4.2,4.3.2
Jquery mobile version: 1.1.0
Jquery: 1.7.1
Can any one help for me for this issue?
Thanks in advance.....
I think you have the Retina landscape dimensions backwards, should be: 2048x1496 not 1496x2048
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="#img_css_scpt/inreviewim_mobile/images/startup_n_icon_images/apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="#img_css_scpt/inreviewim_mobile/images/startup_n_icon_images/apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
Reference:
http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images
https://gist.github.com/2222823
Related:
Mulitple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?