I'm trying to convert a web page to look like a native app. I've got the icon to show and the portrait splash screen to show but the landscape splash screen will not. Here are some my meta tags-
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash_tall.jpg" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash_wide.jpg" />
<link rel="apple-touch-icon" href="images/icon.png" />
The images are 768x1004 (portrait) and 1024x748 (portrait). Anyone see anything off?
I'm not sure if it matters, but update your images to .png and update your link references to....
<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="spash-1004.png" />
<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="spash-1024.png" />
Related
I added
<link rel="apple-touch-icon" href="favicon.png" />
<link rel="apple-touch-startup-image" href="splash-screen.png"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
between the head tags of my website
but it doesn't work for the startup image
is this normal?
Are you trying to view the startup image in your desktop browser? If so then I would visit your website on an IOS mobile device and add the app to your homescreen. When you open it you should see the splash screen.
Splash screen are also tricky with different screen sizes. You can use the following code to ensure that it works.
<!-- IOS Touch Icons -->
<link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
<link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
<link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
<link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">
<!-- iOS Startup images -->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
It is quite tedious to generate all of these images so I would use a tool to generate the different icon and splash screen images automatically.
One such tool would be http://ticons.fokkezb.nl/
This functionality appears to have been broken since iOS 9.
Although there hasn't been any official word, this thread (and the lack of response from Apple) suggests it is possibly a bug.
The official documentation (last updated December 2016) still lists the apple-touch-startup-image feature so hopefully it will be fixed eventually.
Since Safari browser for mobile devices (iPhones and iPads) doesn't fully support Tahoma font,so want to set Arial font for iPhones and iPads only. So how can I set font type Arial only for iPhone and iPad, and other os will have Tahoma font.
Please help me out
To Targeting Specific Style Sheets iPad and iPhone Please put this code in your <head> tag:
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="http://example.com/iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="http://example.com/iPad.css" />
<!--<![endif]-->
I'm working on a website for a client and noticed that when I pin the website to the homescreen on a device using iOS 9, the splash screen isn't showing up anymore.
This particular test was against the iPhone 6+/6s+. If I switch to iOS 8.4 in the iOS Simulator, however, it does show the splash screen as expected.
Any ideas what might have changed? I tried searching on both Google and here, but I haven't come across anything regarding this issue.
I've included my code below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>iOS Splash Screen Test</title>
<meta name="description" content="iOS Splash Screen Test" />
<!-- iOS: Safari -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="iOS Splash" />
<!-- iPhone 6+/6s+ -->
<link href="http://placehold.it/180x180.png" sizes="180x180" rel="apple-touch-icon" />
<link href="http://placehold.it/1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="http://placehold.it/1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
</head>
<body>
Placeholder text.
</body>
</html>
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'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)" />