I'm creating a web app that needs to be displayed in full screen mode on an ipad. I also need to remove the 300ms click delay for the app to perform responsively. To do this I've added the following metatags to the header:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0">
Full screen mode is activated when I add the website to my home screen (Safari, Share->Add To Home Screen).
The issue I'm running into is that when I view the web app in Safari, the 300ms click delay is removed, however, in full screen mode (when opening the app via the home screen icon), the 300ms click delay persists.
As a very simple example, here is a codepen with 2 radio buttons with the meta tags set as I mentioned above:
http://codepen.io/cgat/full/ZBwYyW/
If you open this pen in mobile Safari and add to the home screen, you'll see the delay in radio clicks.
I'm testing with an ipad air.
Related
I have got a web page that I am showing on full-screen when open it from the home screen via:
<meta name="apple-mobile-web-app-capable" content="yes">
this works fine, but in iOS7 the status bar appears with a black text over black background and:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
does not work, while it works on iOS8.
Where does it get the text colour? and why there is no possible way to change it? I searched for a bit on this matter and I couldn't find a solution other than not showing the app on full-screen mode, I need to show the time on the status bar.
I have built the following as test scenario: http://dev.driz.co.uk/Spinner/ for a webapp that will run on an iPhone Chromeless. If you open it up on your iPhone and add it to your homescreen you will see it as a full-screen web app complete with startup screen and preloader.
I have made the startup screen and first screen that the user will see the same as per the Apple documentation quoting: "Generally, design a launch image that is identical to the first screen of the app. Avoid including elements that might look different when the app finishes launching, so that users don’t experience a flash between the launch image and the first app screen."
As stated above, I have made them the same to prevent the flash that can happen between the startup and the app itself (usually due to different UI components, of which my don't change on startup). However I still get this flash! It's as though the app is showing the startup and then hiding and then showing the website which includes the showing the splash screen with the startup image again.
Any ideas on how I can combat this? I have even tried setting the html/body itself to have the background image of the startup screen but their is still a flash as it loads in. Also tried using an actual image instead of background, but again same issue.
Ok. Quick answer: Don't use the ios startup image imo, because it just shows very unrealiable and outside of ios you can't use it anyway. I don't know how long I tried to get a decent image to show and once you are talking different devices and formats it's just nasty with all the images you have to provide.
I have done a css/javascript splash screen, which I'm using for my own application (for example here). You can specify a portrait and landscape image (in 4 sizes) which get loaded depending on device.
The background is attached to the splash class, which I'm setting on the body and removing once the app has loaded.
I have put the code inside a repo on Github. Feel free to use. If you have any questions, let me know.
I am betting that the flash you are seeing is the background of the window, or your webview. It is most likely white, and when the app loads, it doesn't render the page immediately, so for a split second you see the white background of the window.
I would try editing the _window.backgroundColor (i'm guessing that property name) on your app delegate or in Interface Builder, and if that doesn't fix it see if you can edit the webview's background color. All may be dependent on whatever toolchain you are using to create the webapp (i.e. phonegap)
I do know that putting a loading image is true for the native app, but no where on the document you linked says it is true for web app as well.
Did you find a solution? I've found the problem is fundamental to the iPhone, regardless of your app.
Take this for example: it shows a website with a background of #ccc with a splash screen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the flicker. And if the splash screen is dark, it looks worse again.
I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not showing the Safari address bar).
I want to prevent the "pinch-to-zoom" and pan/zoom functions so the page always remains static. How do I do this?
If you put the following meta tag into the html output and then start the app from the homepage then it will be fullscreen when it runs:
<meta name="apple-mobile-web-app-capable" content="yes">
The following is to prevent the user from zooming:
<meta name="viewport" content="width=device-width,user-scalable=no">
So you can make a website go "full screen" and hide the addressbar/chrome on ipad if the user adds your page to their home screen, which makes an icon on the home screen that they launch your site from. You just put some meta tags like this:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
However, I haven't been able to get a site to hide the browser chrome when the page is just in a normal browsing session (the user hasn't launched your site directly from an icon on their home screen). Is it possible to do so? How?
According to the Apple Docs it doesn't specifically say you can't (however as you've noted, it appears to only behave as desired when the site has been added to your home screen).
I also noted that on the Apple Support Forum the consensus seems to be that you need to launch from the home screen to get the desired effect.
Quote from Docs:
apple-mobile-web-app-capable
Sets whether a web application runs in full-screen mode.
Syntax
<meta name="apple-mobile-web-app-capable" content="yes">
Discussion
If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.
You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
Availability
Available in iOS 2.1 and later.
I found this works,
$('body').delay('1000').animate({ scrollTop: '0px' }, 'slow');
I noticed that scrolling down removed it, so scrolled 60px (height of the chrome), but that hide it and scrolled down the page, but a scroll of 0px, assuming your page has started at the top (not on a # target), fools it!
I guess you could even remove the delay and animate, but I wanted it to be smooth, and not too jerky.
I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not showing the Safari address bar). I have therefore added the following meta-tags to the site master page:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width">
I start the app from the iPad home page and it starts nicely in full-screen mode (not showing the Safari address bar) but when I click a to another page in the site (with the same meta-tags, as inherited from the same site master page) then the address bar suddenly pops into view (and remains in view). The link looks as follows (I am using jQueryMobile):
Home
How can I force the web app to remain looking like a 'native-app' by keeping the address bar hidden when navigating between internal pages?
It would appear that Mobile Safari does not 'natively' support full-screen if you use external links. As soon as you use an html anchor then it flips out of full-screen mode. The window.scrollTo may be a workaround that will work for some people, but I also want to avoid the way that the UI flips itself when transitioning to the non-full-screen mode too.
The answer is to use window.location.assign(). This keeps the full-screen app in 'native' full-screen mode. You just need to refactor your tags into javascript window.location.assign(url) calls - that then keeps the thing in full-screen.
Add jQuery and you don't have to modify any links,
$(document).ready(function(){
$('a').click(function(event){
event.preventDefault();
window.location.assign($(this).attr('href'));
});
});
Example link:
Next page without safari
maybe this: source
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});